Googleでログインを実行する方法

この記事では、Googleとネストしてログインします.Expressから来て、巣JSでOAuthを実装することは特に一般的なパスポートモジュールを使用するとき、それほどまっすぐに前に見えないかもしれません、巣JSで、それほど多くのものが実装されて、このものすごいフレームワークで開発者によって箱から使い果たすことができるいろいろな巣モジュールで包まれるので.これは非常に良いことですが、あなたは通常のもののいくつかの巣で異なる動作する方法を把握するために時間を取らなければならない.
ネストJSはスクリプトを使用するが、バニラJSを使用することができますので、実際に開発者にTypesScriptで書くことはできません.
ネストは、人気の高いExpressフレームワークに構築され、いくつかの概念は非常によく知られているが、あなたが巣と一緒に働いたことがない場合は、この記事からより多くを取得したい場合、私はあなたがフレームワークhereで自分自身を慣らすために数分かかることを提案し、概要セクションは間違いなくあなたがすぐに行くことができます.

必要条件

このチュートリアルを次の手順に従ってください.
ノードJS

NPM

ウェブブラウザ

コードエディタ( VSCODE )

Gmailアカウント

ノードがない場合.JSはちょうどノードのコピーを得るために公式のNode.jsのウェブサイトにインストールされました.あなたのプラットホームのためのJS.一度ノードをインストールします.自動的にNPMがインストールされます.

始める

始めるには、ネストCLIを使って新しい巣プロジェクトを構築するつもりです.

npm i -g @nestjs/cli

新しい巣プロジェクトの作成
ネストCLIをグローバルにインストールしているので、次のコマンドを実行して新しいネストプロジェクトサーバーを設定することができます.

cd desktop && nest new google-login && cd google-login

生成されたプロジェクトフォルダを選択したエディタで開きます.以下のようになります.

依存関係のインストール
このプロジェクトのために、私たちは環境変数を管理するためにパスポート、dotenvを使用しています.

npm install --save @nestjs/passport passport passport-google-oauth20 dotenv
npm install -D @types/passport-google-oauth20

実行してサーバーをテストします.npm run start:devここでブラウザを開いて、「localhost : 3000」を実行しているLocalhost URLを入力してください.

今、私たちは行きたい🚀

Googleアプリケーションの作成

Google OAuthを使用するには、Google開発者コンソールのため、Gmailアカウントの必要性をアプリケーションを作成する必要があります.https://console.developers.google.com/を訪問し、ネストJSで認証を設定するアプリケーションを作成します.それで、あなたがGoogle DeveloperコンソールURLを訪問するとき、あなたは以下のスクリーンに類似した何かを見なければなりません

「新しいプロジェクト」をクリックし、ご希望の名前を入力し、[作成]ボタンをクリックします.
プロジェクト同意画面を設定する
プロジェクト同意画面は、ユーザーが私たちのシステムにログインするためにGoogleアプリケーションを使用したいときはいつでも、ユーザーに表示されます.同意画面を設定する
サイドバーで「auauth同意画面」メニューをクリックしてください

任意のGoogleアカウントで使用することができますし、作成をクリックして外部を選択します.
同意画面では、「アプリケーション名」を入力するだけで、テスト目的のためだけではありません.我々は、その後、承認プロセスを通過する必要があります他のフィールドを埋めることができるライブアプリケーションを作成している場合.完了したら保存をクリックします.
アプリの資格情報を取得する
サイドバーで“資格情報”メニューでGoogle APIをクリックしてアプリケーションを認証するために使用される当社のアプリの資格情報を取得するには.

作成した資格情報をクリックし、OAuthクライアントID

を選択します

次の画面でWebアプリケーションを選択し、許可されたJavaScriptの起源とリダイレクトURIを入力します.

認可されたJavaScriptの起源は、このケースではlocalhostであり、http://localhost:3000に入り、認可されたリダイレクトURIがhttp://localhost:3000/google/redirectに入ります.
親切に注意してくださいリダイレクトURIは単にGoogleがユーザーを認証した後にレスポンスを返すアプリケーションの特定のエンドポイントを参照します.
完了したら保存をクリックします.以下の画面からアプリの資格情報を取得する必要があります

我々はアプリでそれを使用する予定ですので、資格情報をコピーし、どこかに保存します.

セットアップGoogleログイン

まず最初にすることはGoogleのログイン実装の中核となるGoogleの戦略を設定することです.Googleという名前のファイルを作成します.戦略srcフォルダ内のtsをファイルに追加します.
< div >
上のコードでは、必要なすべての依存関係を読み込み、PassportStrategyクラスのサブクラスとしてGoogleStrategyクラスを作成しました.パスポートを使用するすべての個々のクラスは'@ nestjs/passport 'から専用モジュールであるPassportStrategyクラスを拡張しなければなりませんp >
それから、我々はそれからGoogle戦略のために必要なすべてのパラメタを通過しますbr/>
ClientRange IDとクライアントの秘密は、アプリケーションのIDと私たちはGoogleから得た秘密は、我々は環境変数を介して読み込まれたアプリケーションを作成したp >
CallbackURLは、Googleがユーザーを認証した後にコントロールを返すアプリケーションの特定のエンドポイントです.Googleでもこのアプリケーションを定義しています.p >
スコープは、我々は我々のアプリで必要なGoogleから必要なユーザー情報のセットを参照します.この場合、プロファイルとユーザメールで取得された基本ユーザ情報p >
Validateメソッドは、Googleが要求されたユーザー情報を返すと、実行される検証コールバック関数を参照します.これはユーザ情報に対して何をしたいのかを決めるところです.この場合、返されたユーザープロファイルから必要な情報を抽出し書式化し、グローバルリクエストオブジェクトで利用できるユーザオブジェクトに追加します.これはdoneを呼び出して、NULL(それはエラーを意味しません)とユーザオブジェクトを渡すことで行われます.p >
以下に示すように環境変数を追加するのを忘れないでください.プロジェクトのルートにあるENVファイル:< p/p >
<堀田>
<ノート> < br/>
我々は簡単に戦略ファイルのユーザー情報としたいが、ネストJSは単一の責任原則で非常に大きいですし、通常ライブアプリケーションでは、私たちはおそらく、データベース内のユーザー情報を保存する可能性が高いので、この種のアクションは巣JS .でサービスと呼ばれる何かに捧げられます.p >
< tt >コントローラ、ルート、およびサービス
私たちがGoogleでログインできるようにするために、我々は我々のアプリケーションで適切な終点をセットアップしなければなりません、そして、これは巣JSのコントローラの仕事です.これを行うには、アプリケーションを開きます.コントローラ.srcフォルダ内のファイルを次のコードで置き換えます.p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/iMichaelOwolabi/f4f5169f7144b9d50613b8ec00c618d0.js//>
< div >
ネストJSでは、ルートはコントローラレベルで、および/またはリクエストメソッドレベルで設定することができますので、上のコードでは、コントローラのすべての要求がGoogleエンドポイントを通過することを意味します.ネストJS

でルーティングを読むことができます
最初のGETリクエストは、“authneurd”と呼ばれるエンドポイント上に置かれた“@ nestjs/passport”モジュールから特別なガードを介してGoogle認証をアクティブにするエンドポイントです.このAuthGuardへの引数として' Google 'を渡すと、パスポートモジュールからGoogleの戦略を使用して、このエンドポイントの要求を認証したいということを意味します.p >
第2のGET要求は、ユーザを認証した後にGoogleがリダイレクトする(第2のエンドポイント)を指します.このエンドポイントは特別なAuthGuardも使用します.Google StrategyファイルからValidateメソッドのDone関数が呼び出された後、コントロールはこのコントローラのGooglelogin関数に戻ります.Googlelogin関数を作りましょうp >
アプリを開く.サービスsrcフォルダ内のファイルをtsし、次のコードを追加します
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/iMichaelOwolabi/6291ce42fbf7c79a323d040ad5d904a8.js//>
< div >
ここでは、Googleのストラテジーファイルにあるvalidateメソッドからリクエストオブジェクトに追加されたGoogleからのユーザ情報を返します.p >
すべてをまとめること
今のところ、我々のアプリケーションはまだ設定されているGoogleの戦略を知らないので、我々はそれを使用する前に、アプリケーションモジュールで利用できるようにする必要がありますbr/>
アプリを開きます.モジュールです.TSファイルを使用して、Google配列をプロバイダー配列のサービスとして追加します.あなたのapp moduleファイルは以下のようになります.
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/iMichaelOwolabi/afada4f6a89ee485a3a5704905352f1a.js//>
< div >

ヒア アプリのテスト

< p >を実行してアプリを起動します
< br/>npm run start:dev < br/>
<> P >
お使いのコンピュータ上の任意のブラウザを起動し、localhostでGoogleエンドポイントを参照してください
< br/> < br/>の画面に似たものが表示されます

ログイン後のGoogleからのユーザ情報は< p/p >以下に表示されます
<堀田>
< p >おめでとう!あなたは正常に巣のJSアプリケーションでGoogle OAuth(ログイン)を実装しているp >
< p >完成コードはここにあります.
あなたが1つを持っているならば、あなたはここであなたのコメントを落すことができます、そして、更なる契約のために、私は常にTwitter