開発

OpenID連携モジュール開発雑記 Authorization_code_flow

| by 優

 

 

仕様

  • Authorization_code_flowに即したOpenIDプロバイダのみ対応とする
  • 独自機能として柔軟なパラメータのバインド機能を実装する

 

フロー

https://sequencediagram.org/

title OpenID連携モジュールによるユーザ新規作成・ログイン

UserDevice->AuthWeb:認証ページ要求
UserDevice<--AuthWeb:認証ページ表示。ユーザはOpenIDプロバイダ毎の認証ボタンをクリック AuthWeb->OpenID Provider:クライアント認証リクエスト
UserDevice<--OpenID Provider:認証要求 UserDevice->OpenID Provider:認証情報送信
アプリSrv<--OpenID Provider:事前登録されているリダイレクトURIに従いクライアント認証のレスポンス アプリSrv->認証Srv:クライアント認証のレスポンスを認証サーバへ
認証Srv->OpenID Provider:クライアント認証のレスポンスを利用してアクセストークン取得リクエスト
認証Srv<--OpenID Provider:id_token返却(access_token, refresh_token, payload, signature) 認証Srv->認証Srv:ユーザの新規作成 or ログイン
アプリSrv<--認証Srv:access_token, refresh_token返却
UserDevice<--アプリSrv:access_token, refresh_token返却

stateの役割

stateパラメータは必ずつけよう🐱

 

nonce

nonceの対応もしよう

OpenID Connectで使われるnonceパラメーターについて

 

クライアント認証リクエストのパラメータ

  • client_id(必須)
    client_id
  • scope(任意)
    アクセス権の種類をスペース区切りで指定
  • state(任意かつ推奨)
    CSRF攻撃を防ぐための一意の値
  • redirect_uri(任意)
    認可が完了した際にリダイレクトされるURIを指定。
    OpenIDプロバイダ側に事前に登録しておく必要がある。
  • response_type(必須)
    レスポンスの種類。
    認証タイプによる異なる。Authorization_code_flowの場合はcodeになる

 

 

アクセストークン取得リクエストのパラメータ

認証サーバ側からOpenIDプロバイダに投げる際に利用

  • grant_type(必須)
  • code(必須)
    OpenIDプロバイダからクライアントに返却される値をアプリサーバが受け取り、認証サーバにリクエストする。認証サーバはこのcodeをOpenIDプロバイダにリクエストすることでid_tokenを得る。
    id_tokenを.で分割してそれぞれデコードすることでaccess_token, refresh_token, payload, signatureを取得できる。
  • redirect_uri(条件付き必須)
    リダイレクトURIを利用しているなら必須
  • client_id(条件付き必須)
    認可サーバによってクライアントが認証されていない場合は必須

 

クライアント認証のレスポンス

  • code
    OpenIDプロバイダから返却される認可コード。
    これを利用して認証サーバはOpenIDプロバイダからid_tokenを得る
  • state
    リクエストにstateが含まれている場合はOpenIDプロバイダから必須で返却される

 

ngrok

https://dashboard.ngrok.com/

開発環境のコールバックURLを外に出す

$ ./ngrok authtoken xxxxxxxx

 

Dockerのアプリを外部公開

$ ./ngrok http -host-header="192.168.10.1:10080" 10080
ngrok by @inconshreveable                                                                         (Ctrl+C to quit)

Session Status                online
Account                       yuu3@xxxxx.co.jp (Plan: Free)
Version                       2.3.39
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://f05xxxxx.ngrok.io -> http://local:80
Forwarding                    https://f05xxxxx.ngrok.io -> http://local:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              2       0       0.01    0.00    5.01    5.01

OpenID連携モジュール開発でLINE, Appleがまず必要

 

LINEのソーシャルログイン

https://account.line.biz/signup

メールに認証リンクが出る。

設定はここが詳しい

https://developers.line.biz/ja/docs/line-login/integrate-line-login/#create-a-channel

 

auth_url

https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={client_id}&redirect_uri={redirect_uri}&scope=profile%20openid

 

ex.

https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=xxxxx&redirect_uri=https://ee5b0d319a2b.ngrok.io/auth/done/OpenId/lineaaa&scope=profile%20openid

 

token_url

ドキュメント

https://developer.yahoo.co.jp/yconnect/v2/authorization_code/token.html

 

curl -v -X POST https://api.line.me/oauth2/v2.1/token \
-H 'Content-Type: application/x-www-form-urlencoded' \
-d 'grant_type=authorization_code' \
-d 'code=JjPfvKwKsU1volwL6dbh' \
-d 'redirect_uri=https://953c0xxxxx5.ngrok.io/auth/done/OpenId/dummy' \
-d 'client_id=xxxxxxx' \
-d 'client_secret=yyyyyyyy'

response

{"access_token":"eyJhbGciOiJIUzI1NiJ9.PMgY_qgIJBU-va8VzKEwvHsGlp-cpKjO_HaUHbmtxrlYnlcpCuNtN8aYG7DTftY4v81jlQqKjvH8prFd098n-J0cEqKTKAlKbrAPyWi0x1yTcCZLaSMHCEKitsE-jxAp6rZV17gU31Z-yjFSGNokH0vskJqgdIpSPhWDOrBYvD8.S6G6WHyBMxuwIpcJv-5ZHPIe_yOh2Z43P3S2-ofOJ1Y","token_type":"Bearer","refresh_token":"WSGrNCsEnLVPDbtmi9Ws","expires_in":2592000,"scope":"profile openid","id_token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL2FjY2Vzcy5saW5lLm1lIiwic3ViIjoiVTYxY2VlMzk2ODNlZDllZThiYTZhMGQ3NmM2NzdhYWRkIiwiYXVkIjoiMTY1NTg1MDY1OSIsImV4cCI6MTYxOTU5NjUzMCwiaWF0IjoxNjE5NTkyOTMwLCJub25jZSI6IjA5ODc2eHl6IiwiYW1yIjpbImxpbmVzc28iXSwibmFtZSI6IuWEqiIsInBpY3R1cmUiOiJodHRwczovL3Byb2ZpbGUubGluZS1zY2RuLm5ldC8waHl1SjRyWEhZSmxwM1RRdFRfNHhaRFVzSUtEY0FZeUFTRDNzNk5GWlBmRzlmS1RJTFRIeHZhd0pFZm1sWkwyUmZHWDg3UEFGRmZ6OFAifQ.rcS6XV57BRpF0gc4TRRjaaHV1tkhC6SoCf2IlIq0Ido"}

 

・LINEの場合client_idには「Channel ID」、redirect_uriにはアプリ側で表示されている緑の「コールバックURL」の値をしてください。

  • トークンURL
    認証URLです。
    https://api.line.me/oauth2/v2.1/token

トークン用POST DATA

  • code
    {code}

  • grant_type
    authorization_code

  • client_id
    LINE管理画面で表示されている「Channel ID」

  • client_secret
    LINE管理画面で表示されている「Channel secret」

  • redirect_uri
    アプリの管理画面で表示されているコールバックURL

  • state
    {state}

  • 外部会員IDとして利用する項目
    sub

 

Yahoo

デベロッパーダッシュボード
https://e.developer.yahoo.co.jp/dashboard/

1.ガイドラインを確認しましょう
https://openid.net/certification/
2.Yahoo! JAPAN IDを取得しましょう
3.Client IDを登録しましょう
4.どのようなアプリケーションを開発しますか？
  1.認証機能を利用したWebアプリケーション
   『Authorization Codeフロー』 または『Hybridフロー』で実装する
  2.認証機能を利用したクライアントアプリケーション（iOS/Android）
   『ネイティブアプリを開発』を参考に実装する
  3.認証機能は利用しない。属性情報が取得できればよい
   『JavaScript SDK』を導入する

 

https://qiita.com/taxin/items/8f1f68cc5ea4fd488ba6

 

 

auth_url

https://auth.login.yahoo.co.jp/yconnect/v2/authorization?response_type=code&client_id={client_id}&redirect_uri={redirect_uri}&state={state}&scope=profile%20openid&nonce={nonce}

 

ex.

https://auth.login.yahoo.co.jp/yconnect/v2/authorization?response_type=code&client_id=xxxxxx-&client_secret=yyyyyy&redirect_uri=https://ee5b0d319a2b.ngrok.io/auth/done/OpenId/yahoobbb&scope=openid%20profile&nonce=n-0S6_WzA2Mj&state=af0ifjsldkj

 

token_url

https://auth.login.yahoo.co.jp/yconnect/v2/token

 

トークン用POST DATA

Google

 

プロジェクトの作成

https://console.cloud.google.com/apis/credentials

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

クライアント IDとクライアントシークレットが得られました。

これを利用して作っていきます。

トークン用POST DATA

  • 認証URL
    https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id={client_id}&scope=openid%20profile%20email&redirect_uri={redirect_uri}
  • トークンURL(固定)
    https://oauth2.googleapis.com/token
  • code
    {code}
  • client_id
    {client_id}
  • client_secret
    {client_secret}
  • grant_type
    grant_type
  • redirect_uri
    {redirect_uri}

 

 

参考

関連記事 - More from my site -

Amazonおすすめ

iPad 9世代 2021年最新作

iPad 9世代出たから買い替え。安いぞ！🐱 初めてならiPad。Kindleを外で見るならiPad mini。ほとんどの人には通常のiPadをおすすめします＞＜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）