Google ログインを使用するように App Service アプリを構成する
今回作成した構成はこんな感じになります。
https://learn.microsoft.com/ja-jp/azure/app-service/configure-authentication-provider-google
前準備として、まずはnode.jsのプロジェクトとしてexpressのアプリケーションを作成しました。
このアプリケーションは、単にHllow worldが表示されるだけです。
こちらが参考になるかもしれません。
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
この状態でAzure App Service 作成してアプリケーションをホスティングします。
後ほど 別の話でも出てきますが、まずはイメージがつくように画像共有します。
Googleクラウド側でもプロジェクトを作成します。
昔作成したプロジェクトが選択されていますが、上にあるドロップダウンからプロジェクトを新規作成することができます。
OpenIdConnectSample と言うプロジェクトを作成しました。
こちらのAPIとサービスから認証情報を選択し、必要な項目を埋めていきます。
認証済みのJavaScript生成元と書かれているところには、自分のApp Service のURLを書き込めばいいです。 以下の情報を参考にして承認済みリダイレクトURIも作成します。
次にAzure 側の設定をしていきます。 App Service アプリケーションを開き、認証ブレードを選択します
IDプロバイダーからGoogleの認証を選択すればオッケーです。
こちらのクライアントIDとクライアントシークレットは、Googleのプロジェクトからコピーしてくる必要があります。 次の画像で具体的にどこからコピーしてくるかというのを書いているので参考にしてください。
設定が完了すると以下のようにApp Service にアクセスしようとするとGoogleにログイン要求が出されます。
認証に成功すると画面に遷移します。
.auth/me で認証の情報を確認してみると、以下のように、クレーム情報が確認できました。
https://aps-openid.azurewebsites.net/.auth/me
ログアウトしてみると、以下のような画面になります。
https://aps-openid.azurewebsites.net/.auth/logout