express-openid-connectを使ってGoogleログインを行う

先日のつづき
https://zenn.dev/takamichie/articles/d3d0bb0f28c7c9

先日のexpress-openid-connect APIサンプルを少しいじって、Googleログインを実装しました。

やること

1. Google Developer ConsoleでOAuth 2.0 クライアント IDを作成する
2. 出力されたクライアントID・シークレットなどの情報を.envに設定する
3. authメソッドのパラメータを修正する

Google Developer ConsoleでOAuth 2.0 クライアント IDを作成する

まずはGoogle Developer Consoleにて、OAuth 2.0 クライアント IDの作成を行います。
https://console.cloud.google.com/
OAuthクライアントの作成についてはあちこちに記載されているので省略します。
登録が完了すると、ClientIDとシークレットが出力されるので、それをコピーします。

また、承認済みのリダイレクト URIには、「 http://localhost:3000/callback 」を忘れずに追加しておきましょう。

出力されたクライアントID・シークレットなどの情報を.envに設定する

出力されたクライアントIDなどの情報を.envに転記します。Googleログインでは、Auth0ログインのように完全ランダムなSECRETを使うことはありませんが、ClientSecretを使いますのでここに値を設定します。

• ISSUER_BASE_URL=https://accounts.google.com/
• CLIENT_ID=[Google Developer Consoleで表示されたクライアントID]
• BASE_URL=変更なし
• SECRET=[Google Developer Consoleで表示されたクライアントシークレット]

authメソッドのパラメータを修正する

今回のGoogleログインでは、レスポンスタイプがcodeとなっているため、一部authメソッドの設定値を変更する必要があります。

app.js

app.use(
  auth({
    authRequired: false,
    auth0Logout: true,
    issuerBaseURL: process.env.ISSUER_BASE_URL,
    baseURL: process.env.BASE_URL,
    clientID: process.env.CLIENT_ID,
    clientSecret: process.env.SECRET, /* secretを削除し、clientSecretに変更 */
    authorizationParams: {
      response_type: 'code', /* レスポンスタイプをcodeに設定 */
    },
  })
);

ここまでできたら、また「 http://localhost:3000/profile 」を再度開きます。
すると、Googleの認証画面が表示されます。

ログインすると、戻り値としてログイン結果を示すJSONデータが返ってきます。

これでログイン成功です。とりあえずはここまで。