SeciossAuthHubでソーシャルログインを試してみる

#SeciossAuthHub

schedule　2019/07/31　 refresh　2023/11/07

 

 

こんにちは、セシオスサポートチームです。

 

今回はSeciossLinkのお話ではなく、弊社から提供しております、SeciossAuthHub について紹介したいと思います。あまり知られていない製品ですので少しでも多くの方にお試し頂ければと思います。

 

参照：APIエコノミー時代に必要な認証・認可機能を持った新サービス「SeciossAuthHub」をリリース

 

 

目標

SeciossAuthHub を使って、ユーザに Google ログインを試してもらう。

 

 

 

環境

      • SeciossAuthHub 申し込みはこちらから
      • Google chrome
      • RESTer
        POSTの送信ができればいいので上級者はターミナルからの curlコマンド などでも可

 

 

フロー

 

事前設定
・APIを提供したいSeciossAuthHub 契約者 が認可サーバの設定を行う。
・アプリ、Webサービスなどをエンドユーザに提供する開発者がSeciossAuthHubにクライアントの登録を行う。

 

SeciossAuthHub のGoogleログインは ユーザにGoogleの認証をさせ、
SeciossAuthHubにユーザが情報を共有することを許可し、SeciossAuthHub から任意のアプリやサービスにユーザID（メール）を渡します。

 

 

SeciossAuthHub 契約者 作業

 

Googleの設定

事前にGoogle側にSeciossAuthHubを登録する必要があります。

 

1. APIの利用設定を行う
Google Developers Consoleにアクセスし、Googleのアカウントでログインして下さい。

 

2. プロジェクトを作成する
APIの設定を作る前に、Googleではプロジェクトを作成する必要があります。
プロジェクト選択 -> 新しいプロジェクト を選択します。

 

プロジェクト名などはなんでもいいです。適当に設定してください。

 

3. 認証情報を作成する
APIとサービス メニューから 認証情報 を選択します。

 

ここで作成する認証情報は 「OAuth クライアントID 」を選択します。

 

作成する情報は以下の通りです。※

 

登録情報

アプリケーションの種類 ウェブアプリケーション
名前 任意
承認済みの JavaScript 生成元 https://auth.seciosshub.com
承認済みのリダイレクトURI https://auth.seciosshub.com/pub/goidclogin.cgi

※承認済みのリダイレクトURIを設定したとき、「無効なリダイレクト：送信前に承認済みドメインの～・・・」と表示された場合は、「承認済みドメイン」の設定が必要ですので、設定します。

 

承認済みドメインでは、「seciosshub.com」を設定してください。

 

以下のような設定で保存します。

 

登録が完了すると、OAuth のクライアント情報が出力されます。
ここで出力されたクライアントID,クライアントシークレットは後ほど使いますのでコピーしておいて下さい。

 

 

認可サーバ設定

SeciossAuthHub へログインします。
サーバ設定より、認可サーバとしての設定を行います。

 

1. ソーシャルIDログインを有効にします。

 

2. 「ソーシャルID」項目中の "2.Google" を有効にし、先程Google側で作成した設定情報のクライアントIDとクライアントシークレットを貼り付けます。

 

3. OAuth 2.0 の機能状態を 有効にします。

 

ここでの設定によって、認可サーバがOAuthのリクエスト時にどんなスコープを許容するか、払い出したアクセストークンは何回有効なのか、有効期限はいつまでなのか、など細かな設定ができます。

 

通常の認可コードフローだけでなく、インプリシットフローでSeciossAuthHubとOAuthのやり取りをしたい...などの場合には、応答種別に TOKEN を設定して直接アクセストークンをもらえるように設定したりもできます。

 

 

 

アプリ・サービス 開発者

 

OAuth クライアント設定

OAuthのクライアントを登録します。
認可サーバ設定画面からログアウトし、下記のURLへアクセスします。
https://auth.seciosshub.com/＜テナント＞/develop/
＜テナント＞はSeciossAuthHub 管理ページのアカウント設定から確認することができます。

 

※開発者ページへのログインでは、Google ボタンを 押して、開発者自身のGoogleの情報を用いてログインします。

 

 

左メニューのOAuth コンシューマを選択し、登録タブより OAuth クライアントを作成します。

 

設定は下記の様にします。

 

コンシューマ登録情報

サービスID test
サービス名 test
クライアントシークレット secret
リダイレクトURI https://localhost/

 

登録後

 

本来は「リダイレクトURI」に設定する値は、認証の結果を受け取るシステムのURIを指定するのですが、
今回は動きを確認するということで 適当なURLになっています。

 

認証結果はリダイレクトされたときのURLのクエリにくっついて送られて来るので、今回のように動きを確認するだけならこれでも問題ありません。

 

また、このリダイレクトURIはカスタムスキーマに対応しており、 myapp:// のような設定も可能です。
自作のスマートフォンアプリなどにも利用できます。

 

以上で設定は終了です。

 

 

認可エンドポイント確認

実際に動作確認をしたいと思います。
が、その前に認可サーバがどの様に動くのかを確認したいと思います。

 

SeciossAuthHub では OAuth 2.0 Authorization Server Discovery Metadata に則って開発されており、この仕様によれば、https:// から始まるURIに対して「.well-known/oauth-authorization-server/」をつけたURLに Get リクエストを投げると該当するOAuth プロバイダー の情報を取得できる、というものです。

 

SeciossAuthHubでは上記の仕様に追加して、最後にテナントIDをつけることでユーザが設定した認可サーバの設定を確認することができます。

 
https://auth.seciosshub.com/.well-known/oauth-authorization-server/＜テナント＞

 

 

実際にブラウザでアクセス（Get リクエスト）してみると以下のようなjson が返ってきます。※


※一部情報（テナント部分）は改変しています。

 

OAuth プロバイダ（SeciossAuthHub の認可サーバ）がどうなっているかという情報ですので、
ここでは説明は割愛させていただきます。

 

 

動作確認 - ユーザ認証・認可コード発行

シナリオとしては利用者が Google でログインを試みます。
認可リクエストでは以下の情報を渡す必要があります。

 

認可リクエスト パラメータ

client_id
 OAuth コンシューマ登録で自動生成されたクライアントID
今回は VSJ56t9F3HF46imo4Ujpr2mn5DL32Qth
redirect_uri
 コンシューマ登録で設定したリダイレクトURI
今回は https://localhost/
response_type
 code
state CSRF 対策用の文字列。
今回は適当に secioss とします。
scope
 認可サーバ設定でどんなスコープを受けるか設定できます。
今回は特に設定が無いのでデフォルト値の openid 、profile、email をスコープに設定します。

 

実際に認可してもらいましょう。


ブラウザを開き、「.well-known/oauth-authorization-server/」で確認した 認可のエンドポイントに対し、上記表にあるようなパラメータを付与してアクセス（Getリクエスト）します。

 
https://auth.seciosshub.com/＜テナント＞/oauth2/authorize.php?client_id=VSJ56t9F3HF46imo4Ujpr2mn5DL32Qth&redirect_uri=https://localhost/&response_type=code&state=secioss&scope=openid+profile+email 

アクセス

 

ユーザはGoogleの情報をSeciossAuthHubに渡すことを許可する

 

次に、SeciossAuthHubを経由して、Googleの情報を別のサービスに渡すことを許可する

 

許可すると、OAuthコンシューマ登録 で設定した リダイレクトURIへリダイレクトされます。

指定はローカルホストなので、表示できるページはありません。

 

 

URLを確認してみましょう。

 

code=1564..... の部分が認可コードになります。
これを使ってアクセストークンを貰いにいきます。

 

 

動作確認 - アクセストークン取得

先程 手に入れた認可コードを使って、トークンエンドポイントへ、アクセストークンを取得します。

 

トークンリクエスト パラメータ

client_id
OAuth コンシューマ登録で自動生成されたクライアントID
今回は VSJ56t9F3HF46imo4Ujpr2mn5DL32Qth
client_secret
OAuth コンシューマ登録で設定したシークレット
今回はsecret
redirect_uri
OAuth コンシューマ登録で設定したリダイレクトURI
今回はhttps://localhost/
grant_type
認可サーバが対応したタイプ
authorization_code
code
先程の認可リクエストで取得した認可コード

 

アクセストークンの取得

 

RESTer というAPIテストツールで アクセストークンをPOSTリクエストします。

 

エラー時： ステータスコード403

認可コードの有効時間が切れているので、アクセストークンを発行できないと言われました。

 

成功時：ステータスコード200

認可コード自体に有効期限があるため、再度認可リクエストをし、時間をあまり空けずすぐにアクセストークンのリクエストを出しました。
送られてきたJSONにアクセストークンがあることが確認できます。

 

 

動作確認 - ユーザ情報取得

ユーザ情報の取得には、OAuth プロバイダーのメタデータに入っていた、
userinfo_endpoint のURLに対して行います。

 

必要なパラメータは access_token のみで、Getリクエストで受け取ることができます。

 

https://auth.seciosshub.com/＜テナント＞/oauth2/userinfo.php?access_token=＜アクセストークン＞

 

 

 

 

いかがでしょうか。

 

今回はSeciossAuthHubを使って、ユーザにGoogleで認証をさせ、Googleから ユーザID（メールアドレス）を取得することができました。

 

ブラウザ上やツール上ではいまいちピンと来ない方もいらっしゃると思いますが、この認可リクエスト結果の受け取り側を正しく実装すれば サイトでよく見るような、[Googleでログイン] のような仕組みを実装することが可能です。

 

第２弾では、実際にどう自前のAPIやアプリ・サービスに組み込んで使うのかなどをご紹介できればと思います。

 

以上、セシオスサポートチームでした。