Gmailを用いてログイン機能を実装する

React

今回のゴール

「Gmailを用いてログイン機能を実装する」
とんぺい
とんぺい

師匠!こんにちは!

今日も前回の続きを学びにきたブゥ!

師匠
師匠

とんぺいくん、こんにちは。

前回はreact-router-domを用いて、URLに紐付いたページ遷移機能を実装したね。

とんぺい
とんぺい

うん。前回の復習はしっかりしてきたブゥ!

ところで、今日はどんな機能を実装するんだブゥ?

師匠
師匠

今日はGmailを用いたログイン機能を実装するよ。

また、ログインの有無でHeaderに表示される、メニュー表示を変えてみよう。

とんぺい
とんぺい

おぉ!楽しみだブゥ!

今日もよろしくお願いします!

師匠
師匠

ではまずは、ディレクトリ構成と必要なパッケージの説明をしよう。

ディレクトリ構成 & パッケージ

師匠
師匠

今回は以上のようなディレクトリ構成になるよ。

Githubにもソースコードを載せておくので参考にしてくれ。

とんぺい
とんぺい

うん。必要なファイルとパッケージも揃えたし、実装の準備は万端ブゥ!

師匠
師匠

では、早速実装に入ろう。

実装しよう!

API_KEYを取得する

GoogleAPI KEYの取得
師匠
師匠

まずは、GoogleAPIをアプリケーションに組み込むためにAPI_KEYを取得するよ。動画をもとに、以下の手順に従えば、API_KEYを取得できるよ。

GoogleAPIsに遷移する

・プロジェクトを作成する

・OAuth同意画面でアプリケーション名を入力する

・認証情報にて「OAuthクライアントID」を作成する

・クライアントID(API_KEY)をコピーする

タグを埋め込む

師匠
師匠

ここではpublic/index.htmlにGoogleAPIを使用するためのscriptタグを挿入しているよ。この作業を行うことで、アプリケーション内にGoogleAPIを導入することができるんだ。

Action creatorの作成

師匠
師匠

ここでは、actionのtypeを定義しているよ。

こうすることで、実装中のタイピングミスでエラーが起きないようにしているんだ。

師匠
師匠

ここではログインした際とログアウトした際のAction creatorを定義しているね。また先程記述した、types.jsからactionのtypeをimportしているよ。

Reducerの作成

師匠
師匠

ここでは、actionがdispatchされた際のreducerを定義しているよ。

また、こちらでもタイピングミスが起きないように、actions/types.jsからactionのtypeをインポートしているね。

師匠
師匠

ここでは、combineReducersをreduxからimportして、外部にexportしているよ。

今回は1つのReducerしか作成していないが、Reducerが複数になった際に、combineReducersで、Reducerを1つにまとめてexportできるんだ。

Storeの作成

師匠
師匠

こちらはsrc直下のindex.jsファイルだよ。

今までと同様にProviderとcreateStoreをimportすることで、ReactアプリケーションにReduxのデータを渡すことができるようになるね。

Componentの作成

師匠
師匠

ここでは

・connectを用いて、reduxに保管しているログイン情報を取得

・ログインしている場合には、全てのメニューを表示

・ログアウトしている場合には、一部のメニューを表示

といった条件分岐を加えているよ。

師匠
師匠

このファイルでGmailを用いたログイン機能を実装しているよ。

とんぺい
とんぺい

うわ~、いっぱい見慣れないコードが書いてあって、何をしているのかよくわかんないブゥ!

師匠
師匠

わからないところは丁寧に説明していくから安心してくれ。

とんぺい
とんぺい

まずはcomponentDidMountの中身について説明してほしいブゥ。

師匠
師匠

わかった。

それでは、少しずつ分割して説明していこう。

師匠
師匠

window.gapi.load("client:auth2", () => ...

では、膨大にあるGoogleのAPIからclientモジュールとauth2モジュールを 取得しているよ。そして「,」の後ろで取得後のcallback関数を定義しているね。

とんぺい
とんぺい

なるほどぉ。

gapi.load()を使うことで、数多くあるGoogleAPIの中から、今回のアプリに必要なモジュールを読み込むことができるんだブゥね!

師匠
師匠

次に以下の説明をするよ。

window.gapi.client
  .init({
    clientId: ******(API_KEY),
    scope: "email"
  })`

師匠
師匠

ここでは、clientモジュールを用いてAPI_KEYの認証とアクセス権の範囲を指定しているよ。

clientIdに取得したAPI_KEYを入力し、scopeに今回ログインに使用したいデータを記述しよう。今回の場合はGmailを用いてログイン機能を実装しようとしているため、scopeにはemailを指定しているよ。

とんぺい
とんぺい

ほぅほぅ。

読み込んだclientモジュールを用いて、API_KEYの認証とこのアプリが取得できるユーザのデータを制限しているってことブゥね!

師匠
師匠

では続いて、以下の文の説明をしよう。

.then(() => {
  this.auth = window.gapi.auth2.getAuthInstance();
  this.onAuthChange(this.auth.isSignedIn.get());
  this.auth.isSignedIn.listen(this.onAuthChange);
});

師匠
師匠

ここでは、clientモジュールでの処理が正常に完了した場合に行われる処理が記述されているよ。

師匠
師匠

まず、毎回「window.gapi.auth2・・・」と書く手間を省くために、this.authを定義するよ。

師匠
師匠

そしてisSignedIn.get()で現在のログイン状態を取得し、このclassで定義したonAuthChange関数(Action creatorを実行する関数)に引数として渡すんだ。

師匠
師匠

isSignedIn.listen(callback function)ではログイン情報が変更されるたびに、callback関数に現在のログイン情報(true or false)を渡して、callback関数を実行するといった記述をしているよ。

とんぺい
とんぺい

なるほどぉ!

この処理を記述することで、GoogleAPI側から、現在のログイン情報を受け取ることができるんだブゥね!

とんぺい
とんぺい

そして、ログイン情報が変わるたびに、listen関数を用いて、onAuthChange関数にユーザのログイン情報を渡して、Action creatorを発火させることによって、Storeのstateが更新されて、アプリケーションのメニューやログインボタンがかわるといったことだブゥね!

師匠
師匠

その通り。さすがとんぺいくんだ。

GoogleAPIについて、さらに詳しく知りたい人は、こちらのドキュメントを参考にしてくれ。

まとめ

師匠
師匠

今回はGmailを利用したログイン機能を実装したよ。

そして、ユーザのログイン状態によって表示するメニューとボタンの表示を切り替える実装を行ったね。

とんぺい
とんぺい

うん。今回の内容は少し難しかったから、家に帰ってから、何回も復習をするブゥ!

今日もありがとうございました!さようなら〜!

師匠
師匠

はい。さようなら。

次回は、reduxを組み込んだアプリケーションのデバックを簡単にするための「Redux Dev Tools」について解説をおこなっていくよ。

コメント

  1. […] 前回は、GoogleAPIを用いて、Gmailを利用したログイン機能を実装したね。今回はredux-devtools-extensionとreduxFormについて勉強を進めていくよ。 […]

タイトルとURLをコピーしました