静的Webアプリで機密コンテンツを保護するにはどうすればよいですか？

開発者向け

静的Webアプリで機密コンテンツを保護するにはどうすればよいですか？

By Maarten van den Hooven 2021.10.20

静的なNext.jsサイトが稼働しています。次に、特定の人にのみ表示される機密情報を含めるように拡張します。静的サイトでどのようにそれを行うことができますか？

この記事では、Auth0を紹介し、認証プロバイダーとして選択した理由を説明し、Next.jsで構築された静的サイトへの統合について段階的に説明します。

私が開発しているアプリはNext.jsで構築されており、Vercelでホストされています。セキュリティを追加することを考えたとき、最初にプラットフォームのオプションを検討しました。 Vercelは確かにパスワード保護またはSSO機能を提供しますが、有料アカウントに対してのみです。また、デフォルトですべての同僚にアクセスを許可するつもりだったので、このトピックに対するより普遍的なアプローチを探していました。

Auth0ははるかに有望であるように思われました。これは、アプリケーション開発者向けのクラウドベースのID認証および承認サービスです。 Auth0を使用すると、ユーザーは、さまざまなIDプロバイダーを備えた複数のプラットフォームで実行されるアプリケーションのシングルサインオンにアクセスできるため、Google、Facebook、Azure AD、または許可されているその他のプロバイダーを使用できます。基本利用は無料ですので、直接ご利用いただけます。

1.まず、Next.jsアプリを作成しましょう。

 npx create-next-app # or yarn create next-app

http://localhost:3000 「WelcometoNext.js」デモアプリが表示されます。

ここで、このWebアプリに、特定の対象者のみが利用できるようにする必要のある機密情報が含まれると想像してください。このため、Auth0をミックスに追加します。

2.新しく作成したNext.jsアプリにAuth0SDKをインストールします。

 npm install @auth0/nextjs-auth0

3. https://auth0.comでアカウントを作成し、テナントを追加します。あなたはあなた自身の名前と場所を選ぶことができます：

4. Auth0にテナントを持つアカウントができたので、次のステップは、Auth0アカウントにアプリケーションを追加することです。これにより、アプリケーションがNext.jsアプリに接続されます。 Auth0ダッシュボードに移動し、新しい通常のWebアプリケーションアプリを作成します。

次に、設定ページで次の設定を行ってください。

許可されたコールバックURL
ローカルでテストする場合はhttp://localhost:3000/api/auth/callback https://myapp.com/api/auth/callbackに設定する必要があります。ユーザー認証後、Auth0はこの設定で追加したURLにのみコールバックします。
許可されたログアウトURL
ローカルでテストする場合はhttp://localhost:3000/に設定するか、アプリケーションをデプロイする場合https://myapp.com/に設定する必要があります。これは、ログアウト後にアクセスするURLです。

5. Google、Facebook、Apple、AzureADなどの複数のIDプロバイダーを使用できます。このアプリケーションでは、ユーザー名とパスワードを使用して新しいテストユーザーを作成します。

[ユーザー管理]-> [ユーザー]-> [ユーザーの作成]に移動します
ユーザー名とパスワードを入力します

6.さあ、魔法を始めて、2つをまとめましょう。 Next.jsアプリに環境変数を追加することから始めます。ローカル環境で、アプリのルートに.env.localこのファイルでは、次の変数を追加して調整する必要があります。

AUTH0_SECRET='LONG_RANDOM_VALUE' AUTH0_BASE_URL='http://localhost:3000' AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth0.com' AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID' AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'

これらの変数のそれぞれについて、以下で説明します。

AUTH0_SECRET

独自の秘密を作成します。次のコマンドを使用して、適切な文字列を生成できます。

 node -e 'console.log(crypto.randomBytes(32).toString('hex'))'

AUTH0_BASE_URL

これはアプリケーションのURLです。ローカル環境の場合、 http://localhost:3000です。

AUTH0_ISSUER_BASE_URL、AUTH0_CLIENT_ID、AUTH0_CLIENT_SECRET

これらは、Auth0dashboardの[アプリケーション]-> [デフォルトのアプリ]-> [設定]-> [基本情報]にあります。 https://をAUTH0_ISSUER_BASE_URLに追加することを忘れないでください。

注：変数は、テスト、受け入れ、本番などの他の環境にも追加してください。 Vercelでこれを行う方法の例については、ここをクリックしてください。

7.次に、動的APIルートハンドラーを追加する必要があります。これにより、サーバーレス関数として複数のAPIエンドポイントが作成されます。サーバーレス関数（SSR）は、たとえば、Auth0から/login
これを行うには、新しいフォルダーpages/api/authとファイル[...auth0].jsます。このファイルに、次のコードを追加します。

import { handleAuth } from '@auth0/nextjs-auth0' ; export default handleAuth();

これにより、認証タスクに必要な次のURLが自動的にリッスンされます。

/ api / auth / login
/ api / auth / callback
/ api / auth / logout
/ api / auth / me

8.次に、Auth0パッケージによって提供されるUserProviderコンポーネントでページをラップする必要があります。 _app.js次の行を追加します。

import '../styles/global.css'
import {UserProvider} from '@auth0/nextjs-auth0' ; function MyApp ( {Component,pageProps} ) { return ( < UserProvider >
< Component { ...pageProps }/>
 UserProvider >
); } export default MyApp

9.最後のステップは、フロントエンドに認証を追加することです。アプリ全体を制限したり、認証が必要な特定のページを構成したり、ユーザー認証ステータスに基づいて特定の要素の可視性を処理したりできます。私の場合、 index.js withPageAuthRequired関数を使用して実現できます。関数を参照してページをラップする必要があります。

import {withPageAuthRequired} from '@auth0/nextjs-auth0' ; export default withPageAuthRequired( function Home ( ) {

ここでhttp://localhost:3000/にアクセスすると、「Welcome to Next.js」デモアプリは表示されませんが、Auth0からログインプロンプトが表示されます。

それでは、作成したテストユーザーを試して、資格情報を入力してみましょう。すべてが正しく構成されている場合は、アプリに戻り、「Welcome toNext.js！」と表示されます。おめでとうございます。Next.jsアプリに認証が正常に追加されました。

認証を使用すると、特定のコンテンツを保護したり、アプリ内でユーザー名などのプロファイルデータを使用したりできるuseUser関数も取得できます。アプリケーションに簡単なログイン/ログアウトリンクを追加する方法の例を次に示します。

 // pages/index.jsx
import { useUser } from '@auth0/nextjs-auth0' ; export default () => {  const { user, error, isLoading } = useUser();  if (isLoading) return < div > Loading...  div > ;  if (error) return < div > {error.message}  div > ;  if (user) {    return (      < div >
 Welcome {user.name}! < a href = '/api/auth/logout' > Logout  a >
       div >
 ); }  return < a href = '/api/auth/login' > Login  a > ; };

Auth0にはさらに多くの可能性があります。完全なリストについては、多くの例とベストプラクティスを含む公式ドキュメントにアクセスしてください。

結論

Next.jsアプリに認証および承認レイヤーを追加する方法を説明しました。この経験を楽しんでいただき、統合のスムーズさに驚きました。これはまた、最近のフロントエンド開発の力を示しており、Auth0などのツールを使用して複雑な機能を数分で実行することがいかに簡単であるかを示しています。

このチュートリアルの完全なコード例はGitHubで入手できます。コミュニティに参加したい場合は、 Discordで見つけることができます。

Blog