はじめに
前回の（その３）は、nuxt-auth-utils で Google Cloud 認証でした。あと３つやっていきます。
できれば、スクショ少なめ、味濃いめで行きたいのですが…
どんどんやる
Azure
Microsoft Entra ID の 管理 の アプリの登録 で 新規登録 します。
作ったアプリで、概要 の 基本 の リダイレクトURI をクリックして開いて、http://localhost:3000/auth/microsoft を登録します。また、管理 の 証明書とシークレット で 新しいクライアントシークレット します。
Azure の場合は、クライアントID と クライアントシークレット に加えて テナントID もメモってください。
プロバイダ毎に必要になる値は、以下を参照ください。
Auth0
アカウントが無い方は、無料プランでアカウントを作成しましょう。
一通り終わったら、また、アカウントをお持ちの方は、Applications の Applications にある Default App や Create Aopplication した Applicaiton を開いて、Domain と Client ID と Client Secret をメモってください。また、もう少し下にある Application URIs の Allowed Callback URLs に http://localhost:3000/auth/auth0 を登録しておきます。
認証されるユーザーは、User Management の Users で Create User しておきましょう。
Cognito
AWS アカウントはあるものとします。管理コンソールにログインしたら、Cognito の ユーザープール で ユーザープールを作成 します。
こんな感じですが、アプリケーションタイプは 従来のウェブアプリケーション がおすすめです。リターン URL も追加しておきます。Cognito は、リージョン と ユーザープールID が必要になります。ユーザープールID は一覧や概要でメモっておきます。クライアントID と クライアントシークレット は、アプリケーションクライアントにありますので、アプリケーションクライアントをセットアップしてからメモってください。
そのまま管理コンソールで、認証 の サインアップ を開いて、セルフサービスのサインアップ では、今回の目的上、予め登録済みのメンバーのみ許可したいので、自己登録は無効にします。
さらに、アプリケーション の アプリケーションクライアント で、作成したクライアントを開きます。ログインページ タブで 編集 して、OpenID Connect のスコープ に プロファイル を追加します。
最後に、ユーザー管理 の ユーザー で認証するユーザーを登録しておきます。
やっと Nuxt3
と言っても、前回とほぼ同じです。以下のをコピーして、リダイレクト先を Cookie から取得するように改造します。
また、ここまでメモった内容は、.env に書き込んでください。
NUXT_SESSION_PASSWORD=
# Google OAuth
NUXT_OAUTH_GOOGLE_CLIENT_ID=
NUXT_OAUTH_GOOGLE_CLIENT_SECRET=
# Microsoft OAuth
NUXT_OAUTH_MICROSOFT_CLIENT_ID=
NUXT_OAUTH_MICROSOFT_CLIENT_SECRET=
NUXT_OAUTH_MICROSOFT_TENANT=
# Auth0 OAuth
NUXT_OAUTH_AUTH0_CLIENT_ID=
NUXT_OAUTH_AUTH0_CLIENT_SECRET=
NUXT_OAUTH_AUTH0_DOMAIN=
# Cognito
NUXT_OAUTH_COGNITO_USER_POOL_ID=
NUXT_OAUTH_COGNITO_CLIENT_ID=
NUXT_OAUTH_COGNITO_CLIENT_SECRET=
NUXT_OAUTH_COGNITO_REGION=
認証方法を定義しているのは、middleware からの遷移先の URL なので、これを環境変数でも書き換えられるように、以下のように変更しておきます。
@@ -4,7 +4,8 @@ export default defineNuxtRouteMiddleware(
if (!loggedIn.value) {
const cookie = useCookie<string | null>('REDIRECT_COOKIE_NAME')
cookie.value = to.fullPath
- return navigateTo('/auth/google', { external: true })
+ const config = useRuntimeConfig()
+ return navigateTo(config.public.loginPath, { external: true })
}
},
)
@@ -7,6 +7,11 @@ export default defineNuxtConfig({
'nuxt-auth-utils',
],
devtools: { enabled: true },
+ runtimeConfig: {
+ public: {
+ loginPath: '/auth/google',
+ },
+ },
compatibilityDate: '2024-11-01',
eslint: {
config: {
こうしておくと、.env や環境変数で NUXT_PUBLIC_LOGIN_PATH=/auth/microsoft とすることで上書きできます。この設定だと以下のようになります。
おわりに
やはり、スクショ多めになってしまいましたが、いかがでしたでしょうか。
一旦、ここまでにしたいと思います。
Discussion