【ALIS】OAuth認証の基本的な手順

ゆうき
2019/06/17 02:53

リンク：

アリスブログ ＞ OAuth認証の説明まとめ ＞当記事

◆ 【ALIS】OAuth認証の基本的な手順

「OAuthの公式ドキュメント」では、一体どのような流れで認証を済ませているのかを説明してみました。

○ 留意事項

・公式ドキュメントでは「Node.js」を利用しているため、そちらに沿って説明していきます

・筆者の「ゆうき」は「へっぽこハッカー」です。サーバーサイドの知識は全然ないので、説明に間違いがあるかもしれません。予めご了承下さい

・下記の説明に誤りがあったら、コメントで指摘しておいてもらえると助かります

○ 基本的な流れ

１，ALISのOAuth認証の利用ガイドラインを確認

２，「Node.js」等が動かせるサーバーを用意

３，ALISの「登録中のアプリケーションの項」からアプリケーションを登録する

４，許可コードを生成する

５，セッションやクッキーなどで「code_verifier」という変数を保存

６，コールバック用のページを用意

７，アクセストークンを取得する

８，アクセストークンを使って、APIを叩く

○ サンプルソース

○ 補足など

１，ALISのOAuth認証の利用ガイドラインを確認

省略。

２，「Node.js」等が動かせるサーバーを用意

あたり前のことなので、公式ドキュメントでは説明が省略されてしまっていますが、サーバーサイドプログラムの「Node.js」を動かすためには、サーバーが必要です。

レンタルサーバーで動かしたい場合は、「Node.js」が使えることを確認した上でインストール。

※ 日本の安すぎるレンタルサーバーだと、「Node.js」をインストールすることができる権利……というか「ssh認証」の権利（Linuxコマンドによる操作の権利）がなかったりすることもあるので注意

VPSなら（おそらく）普通に導入可能、なはず。

上記のサンプルコードでは、無料のサーバーレスシステムの「ZEIT Now」を利用しています。

３，ALISの「登録中のアプリケーションの項」からアプリケーションを登録する

プログラムを作る際、「Client ID」「Client Secret（重要。他者に漏洩したら終わるもの）」は第三者にはわからないようにしておきましょう。

間違っても、JavaScriptをユーザーサイドで起動して（Html文に入れて）「Client ID」「Client Secret」の変数が露呈することはないように。

また、リダイレクトURIは、サイトのトップページとかではなく、コールバックを受け取るページのURLを記載しておけばOKです。

（一例：https://alis-oauth-sample.yuuki.now.sh/api/routes/callback.js）

４，許可コードを生成する

公式のサンプルでは、「base64url」「sha256」のパッケージを利用しているので、「Node.js」を使用する場合は、こちらも（npm installとかで）インストールしておく必要があります。

（phpで作る場合は、多分上記のような追加パッケージは不要）

５，セッションやクッキーなどで「code_verifier」という変数を保存

公式ドキュメントには詳しく書かれていなかったと思いますが、「code_verifier」は「４，許可コードを生成する」と「７，アクセストークンを取得する」で同じものを使用しなければならないため、

「４，許可コードを生成する」の時点で、何らかの手法で「code_verifier」変数を保持しておく必要があります。

上記のリンクのコードでは「code_verifier」をクッキーに入れて保存していますが、実用的なサービスの場合は、セッション（サーバー側）で保存しておいたほうが良いかもしれませんね。

※１上記のリンクのサンプルコードは「ZEIT Now」で動かしているため、データベースがないことから、クッキーを利用しています

※２一応、「ZEIT Now」の場合でも、FireBaseとかMongoDBとかHerokuと連携すれば、セッション管理ができると思われます（やったことはないけど）

※３上記のリンクのサンプルコードでは、クッキー利用の際に「express」と「cookie-session」のパッケージを使用しています

６，コールバック用のページを用意

const code = req.query;

のような感じで、

「https://example.com/oauth?code=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx」

codeの部分（xxxxxxxxxxxxxxxxxxxxxxxxxxxxx）を回収できるようにしておきます。

７，アクセストークンを取得する

一例：

const client_id = process.env.CLIENT_ID;
const client_secret = process.env.CLIENT_SECRET;
const fetch = require("node-fetch");
const redirect_uri = process.env.REDIRECT_URI;
const alis_oauth_base_url = "https://alis.to/oauth2";

export const getToken = req => {
const { code_verifier } = req.session;
const { code } = req.query;
const token = Buffer.from(`${client_id}:${client_secret}`).toString("base64");
const options = {
body: `grant_type=authorization_code&code=${code}&redirect_uri=${redirect_uri}&code_verifier=${code_verifier}`,
method: "POST",
headers: {
Authorization: `Basic ${token}`,
"Content-Type": "application/x-www-form-urlencoded"
}
};
return fetch(`${alis_oauth_base_url}/token`, options);
};

公式には、アクセストークン取得のサンプルコードが用意されていなかったので記載。

ここでは「node-fetch」というパッケージを利用しています。

その他はコードを読んで、何となく必要なものを理解して下さい。

const { code_verifier } = req.session;

「req.session」は、前に作ったクッキーの情報の読み込みです。

「４，許可コードを生成する」の時点で、「req.session.code_verifier = code_verifier;」というような感じで、変数を保持しています。

補足：ALISの通常のAPIでの個人認証は「id_token」を利用していましたが、「OAuth認証」の場合は「access_token」を利用するみたいです

８，アクセストークンを使って、APIを叩く

「７，アクセストークンを取得する」で「アクセストークン」さえゲットできてしまえば、後は「Authorization ヘッダ」に「アクセストークン」を追加するだけでやりたい放題です。

（注意：アクセストークンの寿命は１時間なので、それ以上使う予定があるなら、「７」の時点でリフレッシュトークンも回収しておきましょう）

一例：

export const getMyInfo = access_token => {
const options = {
method: "GET",
headers: {
Authorization: `${access_token}`,
"Content-Type": "application/json"
}
};
return fetch(`${alis_api_base_url}/me/info`, options);
};

おまけ：Python（ローカル環境）での、アクセストークンを使った認証の確認

import urllib.request
import json
import pprint

# アクセストークンの入力
access_token = input('Your Access Token:')

url_name1 = 'https://alis.to/oauth2api/me/info'
method1 = 'GET'
headers1 = {'Authorization': access_token}

request1 = urllib.request.Request(url_name1, None, headers = headers1 , method = method1)

with urllib.request.urlopen(request1) as cm_data1:
response_data1 = json.loads(cm_data1.read().decode("utf-8"))

pprint.pprint(response_data1)

input('Enterキーで終了')

・「ALISのAPI」を使用する方法まとめ

で「Python」を利用された方は、こちらのほうが馴染み深い……かも。

（「個人認証のプログラム」の一部を改造しただけです）

以上です。

サンプルコードと、手順の説明があれば、OAuth認証の他言語化とかも比較的用意になると思います。

(´∀｀)

「OAuth認証の説明まとめ」に戻る