🎩

OAuth2.0認可サーバーを実装したので解説する①【触れてみる編】

3 min read

OAuth2.0とは

認可のフローを標準化したフレームワークです。
APIを外部に公開する等の際、OAuth2の仕様に従って認可サーバーを実装すれば高いセキュリティを確保出来ます。

RFC6749The OAuth 2.0 Authorization Framework の仕様が定義されてます。
OpenID Foundation Japan 様より、日本語訳もされているのでこちらも参考になると思います。

認可とは?

似たような言葉で認証がありますが、これと何が違うのか?
認証とは本人である事を証明すること、これは簡単に言うとログインのことです。
そして、認可とは特定の権限を別の何かに与えることであり、認証とは区別されます。

触れてみる編について

こちらの記事では、サンプルアプリを触りながらOAuth2.0の認可のフローを体験し、認可のイメージを掴むことを目的としています。

認可のフロー

以下はサンプルアプリのシーケンス図です。この図を見ながら読み進めるとよりイメージが湧きやすいと思います。

OAuth2フロー

サンプルアプリ

Node.jsで実装しました。docker-composeでサービスが立ち上がります。

docker-compose up

サービス一覧

サービス名 ホスト 説明
にゃーん localhost:3000 ボタンを押下すると「にゃーん」と可愛い顔文字と共にポップが出るサービス
つぶやきったー localhost:9000 つぶやきを投稿するサービス
認可サーバー localhost:9001 つぶやきったーのOAuth2とその管理画面を提供するサービス

実現したいこと

にゃーんボタンを押した時、ポップが表示されると共につぶやきったーに投稿される

動かしてみる

サンプルアプリでは2つの独立したサービスがあり、それをOAuth2で連携します。

にゃーんサーバー

これはボタンを押すと『にゃーん』とポップが出るそれだけのサービスです。

localhost:3000 にアクセスします。にゃーんボタンを押すと、猫のポップが出ます。

にゃーん

つぶやきったー

つぶやきを投稿するサービスです。

localhost:9000 にアクセスします。
アカウントにログインして、テキストを入力して、POSTボタンを押すと投稿出来ます。
docker-compose up でサービスを立ち上げていれば、以下のアカウントが既に登録されているので、ログインしてみてください。

項目
名前 ほげほげ
メールアドレス test@example.com
パスワード password

つぶやきったー

認可する

それではこの記事の最終目標である認可の動作を体験していきます。

Client作成

clientとは認可のやりとりをOAuth2サーバーと秘匿通信を行うために使う認証情報です。

localhost:9001 にアクセスして、にゃーんサービス管理用アカウントでログインします。
docker-compose up でサービスを立ち上げていれば、以下のアカウトが既に作られています。

項目
名前 にゃーん
メールアドレス nyan@example.com
パスワード password

ログインしたら、NewAppボタンからアプリを作成します。
作成したアプリの管理画面を開き、以下の値を入力して保存する。

項目
Redirect URI http://localhost:3000/oauth2/callback
Scope Read Write を選択

OAuth2

OAuth2クライアントのクレデンシャルを設定

docker-compose.yamlを開き、 TSUBUYAKI_CLIENT_ID, TSUBUYAKI_CLIENT_SECRET, TSUBUYAKI_REDIRECT_URI にそれぞれ Client ID, Client Secret, Redirect URI の値を設定する。
docker-composeのサービスを再起動。

認可

localhost:3000を開き、右上のつぶやきったーでログインボタンを押す。
すると、つぶやきったーの認可画面が開きます。

以下の認証情報を入力してログインボタンを押す。

項目
メールアドレス hoge@example.com
パスワード password

すると、にゃーんサーバーにリダイレクトされます。
以上で認可のフローは完了です。

最後に認可が成功していることを確かめるためににゃーんボタンを押してみましょう。
ねこのポップが表示され、 localhost:9000 を開いてみると『にゃーん』と投稿されています。

にゃーん

つぶやきったー

記事一覧

https://zenn.dev/akhr_s/articles/11331882be7b8d

https://zenn.dev/akhr_s/articles/bc75705d3438fc

https://zenn.dev/akhr_s/articles/78ca9d20907f6b

Discussion

ログインするとコメントできます