それを伴う認証とオーバーヘッドを管理することは、メンテナンスとセキュリティに関して騒ぎでありえます.だからこそ、Googleやマイクロソフトなどのアイデンティティプロバイダを使用して、ユーザーがアプリケーションにログインし、保護されたルートに移動できるように簡単です.
私の会社では、我々は反応でフロントエンドを書いて、状態管理のためにアポロクライアントを使用して、我々のGraphSQL APIと通信するために、我々はマイクロソフトIdentityプラットホームからトークンを得るためにMSAL(マイクロソフト認定図書館)を活用する方法を探しました.
MSALは、Apolloクライアントがリクエストで送信するアクセストークンを更新するために、リフレッシュトークンを使用します.したがって、キャッシュされたリフレッシュトークンを使用してアクセストークンを取得しようとするのは、サイレント取得メカニズムを持っています.失敗した場合、例外をスローします.これは、ユーザーが再びログインした後に、別のアクセストークンを取得するために、マイクロソフトのログインフレームとユーザーとの対話を必要とすることを意味します.
さらにADOなしでコードを続けましょう.
我々は、反応プロジェクトで以下のパッケージを必要とするつもりです.yarn add @apollo/client @azure/msal-browser @azure/msal-reactsrc/
┣ アプリ
┃ ┣ フック
┃ ┃ ┗ USequeryUser.js
┃ ┣ サービス
┃ ┃ ┣ アポロ
┃ ┃ ┃ ┗ インデックス.js
┃ ┃ ┗ 認証
┃ ┃ ┣ Auth設定.js
┃ ┃ ┗ インデックス.js
┃ ┣ 表示
┃ ┃ ┗ インデックス.js
┃ ┗ インデックス.js
┣ 共有
┃ ┗ ヘルパー
┃ ┗ アディクト
┃ ┃ ┗ インデックス.js
┣ アプリ.テスト.js
┣ インデックス.CSS
┣ インデックス.js
┗ テストテスト.js
プロジェクトのGithubレポのリンクを入れますが、ここではトークンを取得する関数を見てみましょう.
MSALをインスタンス化し、必要な設定をロードした後、フックを使用してライブラリの関数を呼び出します.
第一にAsyncTokenLookup 関数はキャッシュされたユーザが存在するかどうかをチェックしますacquireTokenSilent msalから.
プロセスが失敗すると、マイクロソフトのログインエンドポイントにリダイレクトを開始することによってユーザーの相互作用を促すことができますacquireTokenRedirect またはポップアップを使用してポップアップを開くacquireTokenPopup .

    const AsyncTokenLookup = async () => {
      const accounts = await instance.getAllAccounts();

      const account = get(accounts, "[0]");
      if (account && inProgress === "none") {
        try {
          const result = await instance.acquireTokenSilent({
            ...loginSilentRequest,
            account,
          });
          return result.accessToken;
        } catch (err) {
          if (err instanceof InteractionRequiredAuthError) {
            // fallback to interaction when silent call fails
            return instance.acquireTokenRedirect(loginRequest);
          }
        }
      } else if (!account && inProgress === "none") {
        return instance.acquireTokenRedirect(loginRequest);
      }
    };

さもなければ、静かな取得が成功するなら、Acceptヘッダーでアポロによって送られるアクセストークンを返します.
そのためには、setContext 関数は@apollo/client パッケージが認証ヘッダーにトークンを注入するために.

    const withToken = setContext(async (_, { headers }) => {
      const token = await AsyncTokenLookup();
      return {
        headers: {
          ...headers,
          Authorization: token ? `Bearer ${token}` : null,
        },
      };
    });

その後、新しいアポロクライアントHTTPLINKとwithtokenトークンを作成します.

    const httpLink = createHttpLink({
      uri: process.env.REACT_APP_BACKEND_URI,
    });

    const client = new ApolloClient({
      link: from([withToken, httpLink]),
      cache: new InMemoryCache(),
    });

この例では、1つの組織ディレクトリのみでアカウントを有効にし、個人のマイクロソフトアカウントではないことに注意してください.
Githubレポへのリンクです.

大阪工大 / アポロクライアント

Boilerplateを取得するには、Apolloクライアント認証を使用してmsalを使用して

アポロクライアント

Boilerplateを取得するには、Apolloクライアント認証を使用してmsalを使用して
View on GitHub