ビルドGoogleログイン

18451 ワード
lowcode google frontend oauth テキストリンク
フロントエンドの開発と製品の重要な側面は、ユーザーの認証とセキュリティです.プロジェクトへのログインフローの追加は、通常、認証で快適になる最も簡単な方法です.
プロジェクトへのログインフローの追加は、通常、認証で快適になる最も簡単な方法です.開発者が始めるには、いくつかの質問があります.
  • パスワードの扱い方
  • リセットパスワードを扱う方法
  • 暗号化方法

    • なぜサードパーティのプロバイダを使用しますか？


    サードパーティのサインオンは、ユーザー名/パスワード認証に広く採用され、安全な代替であることが証明されています.
    社内の認証をして、すべてを管理する複雑さに関して回顧するのはより簡単です.これは、パスワードを含むすべてのユーザーデータが内部サーバーに格納されなければならないことを意味します、そして、それは適切に塩漬けされて、ハッシュされる必要があります.すべての複雑さを管理して、Google、Facebookなどがマンモススケールですでに解決した問題を解決することは、この問題の最も効率的な解決でありません.サードパーティのサインオンは、我々はユーザーの資格情報を扱うことはありませんので、このすべての世話をする.これは、我々が統合したOAuthプロバイダーによって行われます.
    サードパーティのOAuthサービスは素晴らしいですが、実装時には、プロバイダAPIに精通して、コードの公正な量が含まれ、複数のログインサービスの統合はまだ簡単ではありません.
    その後、canonic来た!

    Canonicを用いた簡易認証


    Canonicで、我々は複数のプロバイダーのために使われることができる一つのAPI終点を提供することによって、この複雑さを減らすのを助けます.プロセスは、すべての異なるログインのために高いレベルで同じままでいます.この記事では、我々はGoogleのログインを統合することによってあなたを歩いていきます.
    だから始めましょう!

    バックエンドの設定


    認証のためのバックエンドを設定するには、まず、頭を踏みましょう.これの後に、あなたがCanonicにログインすることができるか、あなたがすでに1を持っていないならば、新しい口座をつくることができます!我々は、開発者が製品を試して有効にする無料の計画を提供します.
    この後、我々は新しいプロジェクトを設定する必要がありますし、名前を付けることができます“テストログインアプリケーション”または何か他のあなたがそれを名前したいと思う😄. このプロジェクトのための新しいDBインスタンスが必要なことを意味する“Create”オプションを選択します.
    今、私たちは、流れるデータを扱うテーブルを作成する必要があります.私たちはテーブルの名前を入力します.作成できるテーブルの3種類があります.

  • リスト-このテーブルに複数のレコードを格納することを意味します.

  • スタンドアローン-このテーブルに1つのレコードしか格納できません.

  • Identity -異なるログインプロバイダーを有効にするユーザーテーブルを作成します.

    • 次の手順では、型としてアイデンティティを選択します.我々は、ユーザー情報のほとんどをカバーする定義済みシステムフィールドの束を提供しています.必要に応じて、このテーブルに複数のフィールドを追加することもできます.

    テーブルとフィールドが用意されているので、このテーブルでログインプロバイダを有効にする必要があります.設定を開くには、「表」をクリックし、タブから「id」設定を選択します.あなたの左側にあるすべてのサービスプロバイダの一覧を見つけることができます.Googleのログインを有効にします.
    この設定で必要なフィールドは三つあります:

  • リダイレクトURI→ ユーザーがGoogleにログインした後にリダイレクトされるURL.(アプリの目的のために)http://localhost:3000/ を返します.

  • クライアントID→ クライアントID ( Google提供)

  • 秘密→ 秘密(グーグルによって提供される)
    すべての設定がいっぱいになると、パネルを閉じ、右上隅に配置を配置します.
    • とVoila!我々のAPIは、消費の準備ができています.それではフロントエンドから始めましょう.私たちはGraphSQLとの反応を使用します.
    クライアントIDとGoogleからの秘密を取得するためのヘルプが必要ですか?もっと読むhere

    フロントエンドの設定


    流れがフロントエンドのように見えることは、ここにあります:
  • ステップ1 -フロントエンドは、ユーザーがサインのためにリダイレクトされる必要があるGoogle URLを得るためにCanonicを呼び出します.
  • ステップ2 -ログインした後、Googleのコードを私たちのアプリにリダイレクトします.
  • ステップ3 -我々は承認トークンとユーザーデータを得るためにこのコードをCanonicに送ります.
    • それはそれを使用してプロジェクトを設定しやすいので、反応アプリを起動するには、CRAと行くことができます.
    npx create-react-app my-test-frontend
cd my-app
npm start
    次に、我々は我々のアプリでGraphSQLをインストールします
    # You can use either yarn or npm
yarn add @apollo/client graphql
    GraphSQLがインストールされた後、我々はGraphic接続URLを取得するためにCanonicに向かいます.垂直方向のナビゲーションバーを介してプロジェクトのドキュメントに移動し、左下にあるボタンをクリックしてAPI Playground .
    タブに接続URLが表示されます.それは終わります/graphql
    接続URLを用意しました.
    GraphSQL APIを消費するには、アポロを使用してクライアントを確立する必要があります.私たちはindex.js ファイルとApplloProviderで我々のアプリをラップし、クライアントを作成します.
    import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const client = new ApolloClient({
  uri: "<COPIED-URI-FROM-CANONIC>",
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
    これで、フロントエンドアプリケーションがバックエンドに接続できるようになります.
  • ここでログインするコンポーネントが必要です.LoginComponentを作りましょう.画面では、ユーザーがGoogleを使用して署名することができますCTAと対話することができます.ユーザーがログインしたら、GoogleログインリダイレクトURLを取得しなければなりません.
    そのためには、コールする必要がありますgetLoginUrlsForUser 以下のパラメータを持つクエリ
    • query Login {
  getLoginUrlsForUser {
    GOOGLE
  }
}
    APIを呼び出してログインURLを取得するにはuseQuery メソッドapollo/client作成するlogin.js インサイドcomponents ディレクトリ.
    import React from "react";
import { useQuery, gql } from "@apollo/client";

const LOGIN_URLS_QUERY = gql`
  query Login {
    getLoginUrlsForUser {
      GOOGLE
    }
  }
`;

function Login() {
  const { loading, error, data } = useQuery(LOGIN_URLS_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;


  return <a href={data?.getLoginUrlsForUser?.GOOGLE}>LOGIN with Google</a>;
}

export default Login;
    これまでのところ、GoogleリダイレクトURLの作業設定があります.

    次の手順
    今、我々はGoogleのアプリケーションに戻ってリダイレクトURLからトークンをつかむ必要があります.それから、我々はCanonic、呼び出しにこのトークンを送らなければなりませんlogin APIを使用し、ユーザーオブジェクトと共に認証トークンを取得します.
    そこで、いくつかの行のコードをApp.js .
    我々はプロジェクトを実行しているhttp://localhost:3000/ それで、GoogleはURLにコードを添えてこのURLにリダイレクトしますhttp://localhost:3000/?code=.......
  • 我々のフロントエンドでは、コンポーネントがマウントされたとき(Webアプリケーションの読み込み時に)、URLにコードがあるかどうかをチェックしたいので、使用しますuseEffect これをチェックする.
    • useEffect(() => {
    const urlCode = new URLSearchParams(window.location.search).get("code");
    if (urlCode) {
      <CALL-LOGIN-API-HERE>
    }
  }, []);
    それで、我々のログイン突然変異を呼びます-我々の突然変異は2つのパラメタを含みます-コード(Googleはそれを後退させます)とサービス(我々のケースで「Google」です).
    mutation Login($code: String!, $service: String!) {
  loginForUser(code: $code, service: $service) {
    token
    user {
      _id
      createdAt
      updatedAt
      email
      firstName
      lastName
      avatar {
        url
        name
      }
    }
  }
}
    💡 注意:これが書き込み操作であるので、適切なパーミッションを持って、私たちのcanonic APIの秘密鍵を生成する必要があります.Canonicに戻る---プロジェクトに設定します.左の垂直メニューにあるプロジェクト設定---アクセストークン-新しいアクセストークンを作成します.必ず書き込み許可を選択してください.もっと読む.
  • 我々が突然変異と効能を結合するときApp.js このように見えるでしょう.我々は我々のアプリでログインコンポーネントをインポートし、我々はトークンを持っているかどうかに応じて、我々はログインコンポーネントを表示します.
    • import { useEffect } from "react";
import { gql, useMutation } from "@apollo/client";

import Login from "./components/Login";

import "./App.css";

const LOGIN_MUTATION = gql`
  mutation Login($code: String!, $service: String!) {
    loginForUser(code: $code, service: $service) {
      token
      user {
        _id
        createdAt
        updatedAt
        email
        firstName
        lastName
        avatar {
          url
          name
        }
      }
    }
  }
`;

function App() {
  const [loginMutation, { data }] = useMutation(LOGIN_MUTATION);

  useEffect(() => {
    const urlCode = new URLSearchParams(window.location.search).get("code");
    if (urlCode) {
      loginMutation({ variables: { code: urlCode, service: "GOOGLE" } });
    }
  }, []);

  return (
    <>
      {!data?.loginForUser?.token ? (
        <Login />
      ) : (
                <div>Hi, you're logged in! You're email is {data?.loginForUser?.user?.email}</div>
      )}
    </>
  );
}

export default App;
    一緒にすべてのステッチは、アプリケーションの作業を取得し、これは次のようになります.

    より多くのログインプロバイダ(Github、Facebook)を追加するには、今Canonicのログインプロバイダを有効にするには、必要な秘密、IDを入力し、あなたが行ってもいいです!
    我々はすでにGithubの上でホストされるこのブログで言及されたコードを持っていますclone this project , 独自のプロジェクトのURLを追加し、スピンを与える!
    仮想環境
    2つのFragment間でどのようにデータを転送するか