この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
こんにちは！たぬきうどんです！
私は2018年に非IT業界から未経験でエンジニアに転職し、現在までエンジニアとして働いています。
この記事では、ReactでGoogleソーシャルログイン機能を作る際にAmazon Cognitoを利用する方法について紹介しています。
Amazon Cognitoを使ってReactでGoogleソーシャルログイン機能を作りたい！と思っている方はぜひ御覧ください！
Amazon Cognitoとは？
Amazon Cognitoはウェブアプリケーションやモバイルアプリに認証、承認、ユーザー管理機能を提供するサービスです。
ユーザー名やパスワードなどのユーザー情報でのログインだけでなく、Facebook、Amazon、Google、Appleなどのサードパーティと連携して、ソーシャルログインすることも可能です。
Amazon Cognitoは主に以下の２つの機能からできています。
- アプリのユーザー登録とログインのためのオプションを提供する、ユーザー情報のデータベースであるユーザープール
- AWSのさまざまなサービスへのアクセスをユーザーに許可するための機能であるIDプール
ユーザープールとIDプールは、併用することも別々に使用することもできます。
ログイン機能実装
１．セットアップ
まずは、Cognitoにユーザープールを作成し、次にGCPで設定を行いましょう。
手順は公式ドキュメントを参考にしてください。
簡単にセットアップの流れを書いておきます。
２．ログイン機能を作っていく
それではログイン機能を作って行きましょう。
今回のベースはViteでプロジェクトを作っていきます。言語はTypeScriptとなっています。
パッケージ管理にはnpmを使用しています。
より詳細なドキュメントが読みたい方は公式ドキュメントを参照ください。
まずは必要なパッケージをインストールします。
今回はAmplifyライブラリを使用して認証機能を実装します。
npm install aws-amplify今回はホストされたUIを使わないので、@aws-amplify/ui-reactをインストールしません。
それでは実際に実装していきましょう。
ソースは以下になります。Amplifyの公式ドキュメントを参照しています。
import { useEffect, useState } from "react";
import { Amplify, Auth, Hub } from "aws-amplify";
import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth";
Amplify.configure({
Auth: {
region: "ap-northeast-1",
userPoolId: "ap-northeast-1_XXXXXXXXXXXX",
userPoolWebClientId: "XXXXXXXXXXXX",
oauth: {
domain: "XXXXXXXXXXXX.auth.ap-northeast-1.amazoncognito.com",
scope: ["openid"],
redirectSignIn: "http://localhost:5173/",
redirectSignOut: "http://localhost:5173/",
responseType: "code",
},
},
});
const GoogleSignIn: React.FC = () => {
const [user, setUser] = useState<any | null>(null);
const [customState, setCustomState] = useState(null);
useEffect(() => {
const unsubscribe = Hub.listen("auth", ({ payload: { event, data } }) => {
switch (event) {
case "signIn":
setUser(data);
break;
case "signOut":
setUser(null);
break;
case "customOAuthState":
setCustomState(data);
}
});
Auth.currentAuthenticatedUser()
.then((currentUser) => setUser(currentUser))
.catch(() => console.log("Not signed in"));
return unsubscribe;
}, []);
return (
<>
<div>{user && user.getUsername()}</div>
<div>{customState}</div>
<button
onClick={() =>
Auth.federatedSignIn({
provider: CognitoHostedUIIdentityProvider.Google,
})
}
>
Googleサインイン
</button>
</>
);
};
export default GoogleSignIn;
Amplify.configureの部分は適宜任意の値に置き換えてください。
また、リダイレクトのURLについては、今回は開発中のローカル環境のURLを使用します。
以上の設定を行った後に、App.tsxに上記のコンポーネントをインポートし、ローカルサーバーを起動してください。
アプリにアクセスするとGoogleサインインボタンが表示されています。
このボタンを押すと「Googleにログイン」という認証ダイアログが表示されると思います。
ログインに成功するとアプリにリダイレクトし、ユーザー名が表示されます。
以上で実装は終了です。
おわりに
以上がReactでGoogleソーシャルログイン機能を作る際にAmazon Cognitoを利用する方法でした。
この記事が皆さんの助けになれば幸いです！
最後まで読んでいただき、ありがとうございました！
