単一のページアプリケーションアーキテクチャを備えたWebアプリケーションの數(shù)が増加しています。これらのアプリケーションは、多くの場合、ユーザープロファイルの詳細を保存するなど、ある程度のユーザーが制限する相互作用を必要とします。従來のHTMLベースのアプリケーションでこの機能を?qū)g裝することは比較的簡単ですが、各APIリクエストに認証を必要とする?yún)g一ページアプリケーションではさらに難しいです。

この記事では、passport.jsライブラリを使用して複數(shù)のプロバイダーにソーシャルログインを?qū)g裝し、その後のAPI呼び出しのトークンベースの認証を?qū)g裝する手法を?qū)g証します。

この記事のすべてのソースコードは、GitHubリポジトリからダウンロードできます。

キーポイント

Passport.jsライブラリを使用して、GoogleとFacebookのソーシャルログインを?qū)g裝し、単一ページアプリケーションのユーザー認証を強化します。
セッションとCookieベースの制限を避けて、安全なトークンベースのAPI認証のためにJSON Webトークン（JWT）を選択します。
ソーシャルログイン機能の使用：簡略化されたUI、ユーザー資格情報を保存する必要はなく、クロスサイトのパスワードリセット。
パスポートGoogle-Oauth、Passport-Facebook、Passport-JWTなどの特定のモジュールでパスポートを構(gòu)成して、認証とトークンの生成を管理します。
パスポート-JWTモジュールを使用してトークンベースの認証を?qū)g裝し、認証ヘッダーのJWTを確認することによりAPIエンドポイントを保護します。
リダイレクトモードとクライアントスクリプトでユーザーエクスペリエンスを簡素化します。

なぜあなたのスパでソーシャルログインを使用するのですか？

Webアプリケーションにログインメカニズムを?qū)g裝する際には、多くの問題を考慮する必要があります。

UIは認証自體をどのように処理する必要がありますか？
ユーザー情報をどのように保存する必要がありますか？
ユーザーの資格情報をどのように保護する必要がありますか？

これらおよびその他の質(zhì)問を検討する必要があります。ログインポータルの作成を開始する必要があります。しかし、より良い方法があります。

主にソーシャルネットワーク（主にソーシャルネットワーク）を使用すると、プラットフォームを使用して獨自のアプリを確認できます。これは、多くの異なるAPI -OAuth 1.0、OAuth 2.0、OpenID、OpenID Connectなどを通じて実裝されています。

これらのソーシャルログインテクノロジーを使用して、ログインプロセスを?qū)g裝することには多くの利點があります。

• ユーザーが認証に使用するUIを提示する責任はもうありません。
• 敏感なユーザーの詳細を保存および保護する責任はもうありません。
• ユーザーは、単一のログインを使用して複數(shù)のサイトにアクセスできます。
• ユーザーがパスワードが漏れていると感じた場合、パスワードを一度リセットし、多くのサイトから利益を得ることができます。
• 通常、認証機能を提供するサービスは、追加の詳細を提供します。たとえば、これを使用して、ウェブサイトを使用したことがないユーザーを自動的に登録したり、プロファイルに代わって更新を投稿できるようにするために使用できます。

なぜAPIにトークンベースの認証を使用するのですか？

クライアントがAPIにアクセスする必要があるときはいつでも、アクセスを許可するかどうかを判斷するための何らかの方法が必要です。これを達成するには多くの方法がありますが、主なオプションは次のとおりです。

セッションベースの認証
Cookieベースの認証
トークンベースの認証

セッションベースの認証には、セッションをクライアントに関連付けるためにAPIサービスが必要です。これは通常非常に簡単にセットアップできますが、複數(shù)のサーバーにAPIを展開すると、問題が発生する可能性があります。また、セッション管理と有効期限のためにサーバーが使用するメカニズムによって制限されます。

Cookieベースのアプローチは、Cookieにいくつかの識別子を保存するだけで、API要求を自動的に識別するために使用されることです。これは、最初にCookieを設(shè)定するには何らかのメカニズムが必要であることを意味し、同じホストへのすべての（適切な）リクエストにCookieが自動的に含まれるため、後続のリクエストで漏れます。

トークンベースのアプローチは、Cookieベースの認証のバリアントですが、より多くの制御を可能にします?；镜膜?、クッキーベースの認証システムと同じ方法でトークンを生成しますが、リクエストに自分自身を含めます - 通常は「承認」ヘッダーに、またはURLに直接。これは、ストレージトークンを完全に制御できることを意味します。これには、要求が含まれます。

注：HTTPヘッダーが「承認」と呼ばれている場合でも、実際に認証に使用しています。これは、クライアントが何をするかではなく、クライアントが誰であるかを判斷するためにそれを使用しているためです。

トークンを生成するために使用される戦略も重要です。これらのトークンは參照トークンにすることができます。つまり、サーバーが実際の詳細を見つけるために使用される識別子にすぎません。または完全なトークン。つまり、トークンにはすべての必要な情報が既に含まれていることを意味します。

トークンを參照するには、ユーザーの資格情報がクライアントに漏れることはないため、重要なセキュリティの利點があります。ただし、行われた各リクエストの実際の資格情報にトークンを解析する必要があるため、パフォーマンスペナルティがあります。

完全なトークンは逆です。彼らはトークンを理解している人にユーザーの資格情報を公開しますが、トークンは完了しているため、それを探すときにパフォーマンスの損失はありません。

通常、この標準によりトークンのセキュリティが改善されるため、JSON Webトークン標準を使用してフルトークンが実裝されます。具體的には、JWTは暗號化トークンを許可します。つまり、トークンが改ざんされていないことを保証できます。また、暗號化できることも規(guī)定されています。つまり、トークンを暗號化キーなしではデコードすることさえできません。

ノードでJWTを使用してレビューする場合は、node.jsを使用してJSON Webトークンを使用するチュートリアルをご覧ください。

完全なトークンを使用するもう1つの欠點はサイズです。たとえば、リファレンストークンは、長さが36文字であるUUIDを使用して実裝できます。代わりに、JWTは數(shù)百の文字ほど簡単になります。

この記事では、JWTトークンを使用して、それらがどのように機能するかを示します。ただし、この関數(shù)を自分で実裝する場合、參照トークンまたはフルトークンを使用するか、これに使用するメカニズムを使用するかを決定する必要があります。

パスポートとは？

パスポートは、Webアプリケーションの認証用のnode.jsのモジュールのセットです。多くのノードベースのWebサーバーを非常に簡単にプラグインでき、モジュラー構(gòu)造を使用して、過度の膨満せずに必要なログインメカニズムを?qū)g裝できます。

パスポートは、多數(shù)の認証ニーズをカバーする強力なモジュールスイートです。これらのモジュールを使用して、異なるエンドポイントの異なる認証要件を可能にするプラグ可能なセットアップを作成できます。使用される認証システムは、URLの特別な値を単純にチェックするだけでなく、すべての作業(yè)を行うためにサードパーティのプロバイダーに依存するのと同じくらい簡単です。

この記事では、APIエンドポイントのソーシャルログインとJWTトークンベースの認証を有効にするために、Passport-Google-Oauth、Passport-Facebook、およびPassport-JWTモジュールを使用します。

Passport-JWTモジュールを使用して、いくつかのエンドポイント（実際にアクセスするために認証が必要なAPIエンドポイント）がリクエストに有効なJWTが存在する必要があります。 Passport-Google-OauthおよびPassport-Facebookモジュールは、GoogleとFacebookに対してそれぞれ認証するエンドポイントを提供し、アプリの他のエンドポイントにアクセスするために使用できるJWTを生成するために使用されます。

シングルページのアプリケーションのソーシャルログインを有効にします

ここから、シンプルなシングルページアプリを取得し、ソーシャルログインを?qū)g裝する方法を説明します。このアプリケーションはExpressで記述されており、シンプルなAPIは安全なエンドポイントと安全でないエンドポイントを提供します。続行したい場合は、https：//github.com/sitepoint-editors/social-logins-spaからこのアプリのソースコードを確認できます。このアプリケーションは、ダウンロードされたソースコードでNPMインストールを?qū)g行して、すべての依存関係をダウンロードすることで構(gòu)築できます。

アプリを正常に使用するには、GoogleおよびFacebookにソーシャルログイン資格情報を登録し、アプリに資格情報を提供する必要があります。完全な指示は、DEMOアプリケーションのREADMEファイルに記載されています。これらの資格情報は、環(huán)境変數(shù)としてアクセスされます。したがって、アプリケーションは次のように実行できます：

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

このプロセスの最終結(jié)果は、Token認証サポート（JSON Webトークンを使用）を安全なエンドポイントに追加し、ソーシャルログインサポート（GoogleおよびFacebookを使用）を追加して、殘りのトークンプロビジョニングの使用を取得することです。これは、ソーシャルプロバイダーを使用して1回認証し、生成されたJWTを使用してアプリ內(nèi)のすべての將來のAPI呼び出しを行う必要があることを意味します。

JWTは、安全でありながら完全に自己完結(jié)型であるため、シナリオにとって特に良い選択です。 JWTは、JSONペイロードと暗號化された署名で構(gòu)成されています。ペイロードには、認証されたユーザーの詳細、認証システム、トークンの有効期間が含まれています。署名は、悪意のある第三者がそれを偽造できないことを保証します。署名キーを持っている人はトークンを生成できます。

この記事を読むと、アプリケーションの一部として含まれるconfig.jsモジュールへの參照がよく表示されます。このモジュールは、アプリケーションの構(gòu)成に使用され、ノードConvictモジュールを使用して外部的に構(gòu)成されています。この記事で使用されている構(gòu)成は次のとおりです。

http.port - アプリケーションが実行されるポート。デフォルトは3000で、「ポート」環(huán)境変數(shù)でオーバーライドされています。

• authentication.google.clientID - Google認証用のGoogleクライアントID。これは、「Google_ClientID」環(huán)境変數(shù)を介してアプリケーションに提供されます。
• authentication.google.clientsecret - Google認証のためのGoogleクライアントキー。これは、「google_clientsecret」環(huán)境変數(shù)を介してアプリケーションに提供されます。
• authentication.facebook.clientID - Facebook認証用のFacebookクライアントID。これは、「Facebook_ClientID」環(huán)境変數(shù)を介してアプリケーションに提供されます。
• authentication.facebook.clientsecret - Facebook認証のFacebookクライアントキー。これは、「facebook_clientsecret」環(huán)境変數(shù)を介してアプリケーションに提供されます。
• authentication.token.secret - 認証トークンに署名するJWTの鍵。デフォルトは「MySuperSecretkey」です。
• authentication.token.issuer - JWTに保存されている発行者。これは、1つの認証サービスが多くのアプリケーションにサービスを提供する場合、どのサービスがトークンを発行するかを示します。
• authentication.token.audience - jwtに保存されているオーディエンス。これは、1つの認証サービスが多くのアプリケーションにサービスを提供する場合、トークンのターゲットサービスを表します。
統(tǒng)合されたパスポート

アプリでパスポートを使用する前に、少量の設(shè)定が必要です。これは、モジュールがインストールされていることを確認し、Expressアプリケーションのミドルウェアを初期化することにすぎません。

この段階で必要なモジュールは、パスポートモジュールであり、ミドルウェアをセットアップするには、Expressアプリに追加するだけです。

Passport Webサイトの手順に従って、Passport.session（）を使用して電話をかけることにより、セッションサポートをセットアップすることが許可されます。アプリでセッションサポートは使用していないため、これは不要です。これは、Stateless APIを?qū)g裝しているためです。そのため、各リクエストをセッションに維持する代わりに、各リクエストに認証を提供します。

安全なエンドポイントのためのJWTトークン認証を?qū)g裝

パスポートでJWTトークン認証をセットアップするのは比較的簡単です。 Passport-JWTモジュールを使用します。これにより、すべての重い持ち上げが行われます。このモジュールは、「JWT」で始まる値を持つ「承認」ヘッダーを探し、ヘッダーの殘りを認証用のJWTトークンとして扱います。次に、JWTを解読し、操作のために自分のコードに格納されている値を提供します。たとえば、ユーザールックアップを?qū)g行します。無効な署名などのJWTが無効である場合、トークンは期限切れになりました...リクエストは、あなた自身のコードの追加の関與なしに認識されません。

次に、JWTトークン認証を構(gòu)成する方法は次のとおりです。

上記の上記では、いくつかの內(nèi)部モジュールを使用しました：

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

config.js - アプリケーション全體の構(gòu)成プロパティが含まれています。これらのプロパティは構(gòu)成されており、値をいつでも使用できると想定できます。

• users.js - これはアプリケーションのユーザーストレージです。これにより、ユーザーをロードして作成できます。ここでは、ユーザーを內(nèi)部IDでロードするだけです。
ここでは、既知のキー、出版社、聴衆(zhòng)を使用してJWTデコーダーを構(gòu)成し、承認ヘッダーからJWTを取得する必要があることをポリシーに通知します。出版社または聴衆(zhòng)のいずれかがJWTに保存されているものと一致しない場合、認証は失敗します。これは、非常に単純な保護ですが、counterfutiating防止防止の別の層を提供します。

トークンデコードは、パスポート-JWTモジュールによって完全に処理されます。 JWTは標準であるため、この標準に従うモジュールはすべて完全に機能します。

トークンを正常にデコードした後、ペイロードとしてコールバックに渡されます。ここでは、トークンの「トピック」によって識別されたユーザーを見つけようとしています。実際、トークンが取り消されていないことを確認するなど、追加のチェックを行うことができます。

ユーザーが見つかった場合、パスポートに提供し、パスポートをReq.Userとしてリクエスト処理の殘りに提供します。ユーザーが見つからない場合、パスポートにユーザーに提供されず、パスポートは認証が失敗したと考えます。

これはリクエストハンドラーに接続できるため、リクエストが成功するために認証が必要になるようにします。

上記の3行目は、パスポートにリクエストを処理させる魔法です。これにより、Passportは、渡されたリクエストで構(gòu)成した「JWT」ポリシーを?qū)g行し、すぐに継続または故障させることができます。

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

認可ヘッダーは提供していませんでした。継続することはできません。ただし、有効な承認ヘッダーを提供する場合は、成功した応答が得られます。

このテストを?qū)g行するために、https：//www.jsonwebtoken.ioにアクセスし、そこでフォームに記入することにより、手動でJWTを生成しました。 「ペイロード」は私が使用しているものです：

「署名キー」は、構(gòu)成から取られた「mySuperSecretkey」です。

// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());

サポートトークン生成

有効なトークンでのみリソースにアクセスできるようになり、実際にトークンを生成する方法が必要です。これは、正しい詳細を備えたJWTを構(gòu)築し、上記と同じキーで署名するJSONWebtokenモジュールを使用して行われます。

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

JWTSを生成するときに、まったく同じオーディエンス、発行者、およびキー構(gòu)成設(shè)定を使用することに注意してください。また、JWTの有効期間が1時間であることを指定します。これは、アプリにとって合理的であると思われる期間であり、構(gòu)成から簡単に変更できるように抽出することもできます。

この場合、JWT IDは指定されていませんが、これを使用してトークン用の完全に一意のIDを生成することができます。たとえば、UUIDを使用します。これにより、トークンを取り消し、DataStoreに取り消されたIDのコレクションを保存し、パスポートポリシーでJWTを処理するときにJWT IDがリストにないかどうかを確認する方法が提供されます。

ソーシャルログインプロバイダー

トークンを生成する機能があるため、ユーザーに実際にログインする方法が必要です。これは、ソーシャルログインプロバイダーが登場する場所です。ユーザーがソーシャルログインプロバイダーにリダイレクトし、成功するとJWTトークンを生成し、將來のリクエストのためにブラウザのJavaScriptエンジンに提供できる機能を追加します。私たちはすでにこのコンポーネントのほぼすべてを持っているので、それらをまとめる必要があります。

パスポートのソーシャルログインプロバイダーは、2つの部分に分割されます。まず、適切なプラグインを使用してソーシャルログインプロバイダーのパスポートを?qū)g際に構(gòu)成する必要があります。第二に、ユーザーが指示されるエクスプレスルートは、認証を開始するために必要であり、認証が成功した後にユーザーがリダイレクトされるルートが必要です。

これらのURLを新しいサブブロウザーウィンドウで開きます。これは、完了したら閉じて、開いたウィンドウ內(nèi)のJavaScriptメソッドを呼び出すことができます。これは、プロセスがユーザーに対して比較的透明であることを意味します。せいぜい新しいウィンドウが開いているのを見て、資格情報を提供するように依頼しますが、彼らが現(xiàn)在ログインしているという事実以外に何も見ることができません。

このブラウザの側(cè)面は、2つの部分で構(gòu)成する必要があります。メインウィンドウでこのビューを処理するポップアップウィンドウとJavaScriptのビュー。これは任意のフレームワークと簡単に統(tǒng)合できますが、この例では、SimplicityのためにVanilla JavaScriptを使用します。

メインページJavaScriptには次のようなもののみが必要です。

これにより、ウィンドウ上にグローバル関數(shù)オブジェクト（AuthingicateCallbackという名前）が登録されます。これにより、アクセストークンが保存され、ルートを開き、認証を開始します。

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

この関數(shù)は、認証を開始する方法でトリガーできます。これは通常、タイトル領(lǐng)域のログインリンクですが、詳細はアプリに完全に依存します。

2番目の部分は、認証が成功した後に提示されるビューです。この場合、私たちは簡単にするために口ひげを使用しますが、これはあなたに最も適した任意の視聴技術(shù)を使用します。

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

ここでは、オープンプログラム（つまり、メインアプリケーションウィンドウ）に上記のAuthingAteCallbackメソッドを呼び出す単純なJavaScriptコードのみがあり、その後、自分自身を閉じます。

この時點で、JWTトークンは、必要な目的のためにメインアプリケーションウィンドウで利用できます。

Google Authenticationを?qū)g裝

Passport-Google-Oauthモジュールを使用すると、Googleに対して認証されます。これには、3つの情報が必要です

クライアントID

• クライアントキー
• urlをリダイレクト
クライアントIDとキーは、Google開発者コンソールにアプリを登録することで取得されます。リダイレクトURLは、Googleの資格情報でログインした後、ユーザーがアプリに送信されるURLです。これは、アプリの展開方法と場所に依存しますが、これでハードコードします。

Google認証パスポートの構(gòu)成は次のようになります：

認証が成功した後にユーザーがリダイレクトされると、GoogleシステムでIDといくつかのプロファイル情報を取得します。最初に、このユーザーが以前にログインしたことがあるかどうかを確認しようとします。もしそうなら、私たちは彼らのユーザーレコードを取得し、私たちは完了です。そうでない場合は、それらの新しいアカウントを登録し、この新しいアカウントを使用します。これにより、最初のログインでユーザー登録が行われる透明なメカニズムが提供されます。必要に応じてさまざまな方法でこれを行うことができますが、今は必要ありません。

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

次は、このログインを管理するためにルーティングハンドラーをセットアップすることです。これらは次のようになります：

/api/authentication/google/startおよび/api/authentication/gogle/redirectのルートに注意してください。上記のように、 /startバリアントは私たちが開くURLであり、 /リダイレクトバリアントは、Googleがユーザーを成功にリダイレクトするURLです。これにより、上記の認証されたビューがレンダリングされ、生成されたJWTが使用されるために提供されます。

// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());

Facebook認証を?qū)g裝

最初のソーシャルログインプロバイダーができたので、2番目のソーシャルログインプロバイダーを拡張して追加しましょう。今回は、Passport-Facebookモジュールを使用してFacebookになります。

このモジュールは、Googleモジュールとほぼ同じ方法で動作するため、同じ設(shè)定と同じ設(shè)定が必要です。唯一の本當の違いは、それが異なるモジュールとそれにアクセスするURL構(gòu)造であることです。

Facebook認証を構(gòu)成するには、クライアントID、クライアントキー、およびリダイレクトURLも必要です。クライアントIDおよびクライアントキー（FacebookのアプリIDとアプリキーと呼ばれる）は、Facebook開発者コンソールでFacebookアプリを作成することで取得できます。 Facebookログイン製品がアプリに追加されていることを確認して、動作させる必要があります。

Facebook認証パスポート構(gòu)成は次のとおりです

これは、「Google」の代わりに「Facebook」が使用されていることを除いて、Googleの構(gòu)成とほぼ同じです。 URLルーティングも似ています

// src/authentication/jwt.js
const passport = require('passport');
const passportJwt = require('passport-jwt');
const config = require('../config');
const users = require('../users');

const jwtOptions = {
  // 從 "Authorization" 標頭獲取 JWT。
  // 默認情況下，這會查找 "JWT " 前綴
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于簽署 JWT 的密鑰
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存儲的發(fā)行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存儲的受眾
  audience: config.get('authentication.token.audience')
};

passport.use(new passportJwt.Strategy(jwtOptions, (payload, done) => {
  const user = users.getUserById(parseInt(payload.sub));
  if (user) {
      return done(null, user, payload);
  }
  return done();
}));

ここでは、デフォルトのセットで十分であるため、使用する範囲を指定する必要はありません。それ以外の場合、GoogleとFacebookの間の構(gòu)成はほぼ同じです。

// src/index.js
app.get('/api/secure',
  // 此請求必須使用 JWT 進行身份驗證，否則我們將失敗
  passport.authenticate(['jwt'], { session: false }),
  (req, res) => {
    res.send('Secure response from ' + JSON.stringify(req.user));
  }
);

概要

ソーシャルログインプロバイダーを使用して、ユーザーログインと登録をアプリにすばやく簡単に追加します。実際、これにより、ブラウザのリダイレクトを使用してユーザーをソーシャルログインプロバイダーに送信し、アプリに送り返すため、従來のアプリに比較的簡単に統(tǒng)合されていても、単一ページアプリに統(tǒng)合できます。

この記事は、これらのソーシャルログインプロバイダーを、使いやすく、使用したい將來のプロバイダーに簡単に拡張できることを約束する?yún)g一ページアプリケーションに統(tǒng)合する方法を示しています。 Passportには、さまざまなプロバイダーと連攜できる多くのモジュールがあり、適切なモジュールを見つけて、GoogleやFacebookで上記のように構(gòu)成するだけです。

この記事は、ジェームズ?コルチェによって査読されました。 SitePointコンテンツを最高の狀態(tài)にしてくれたすべてのSitePointピアレビュアーに感謝します

ソーシャルログイン統(tǒng)合（FAQS）

に関するFAQ ソーシャルログインを私のWebアプリケーションに統(tǒng)合することの利點は何ですか？

ソーシャルログインをWebアプリケーションに統(tǒng)合すると、いくつかの利點があります。まず、ユーザーは、別のユーザー名とパスワードを覚えていない既存のソーシャルメディアアカウントに登録できるため、ユーザーの登録プロセスを簡素化します。第二に、単純化された登録プロセスにより、より多くのユーザーがサインアップできるようになるため、コンバージョン率を改善できます。最後に、ソーシャルメディアプロファイルでユーザーデータにアクセスできるようになり、ウェブサイトでのエクスペリエンスをパーソナライズするために使用できます。

ソーシャルログインを使用するときにユーザーデータのセキュリティを確保する方法は？

ソーシャルログインを統(tǒng)合するときにユーザーデータのセキュリティを確保することが重要です。これは、OAUTH 2.0などの安全なプロトコルを使用して認証することで行うことができます。これにより、ユーザーパスワードがアプリと共有されないようにします。さらに、アプリケーションで必要なユーザーデータの最小額のみを要求し、このデータが安全に保存されることを確認する必要があります。

Webアプリケーションに複數(shù)のソーシャルログインを統(tǒng)合できますか？

はい、Webアプリケーションに複數(shù)のソーシャルログインを統(tǒng)合できます。これにより、ユーザーがより多くの選択肢を提供し、登録の可能性を高めることができます。ただし、ユーザーが使用することを選択したソーシャルログインに関係なく、ユーザーエクスペリエンスがシームレスであることを確認することが重要です。

複數(shù)のソーシャルメディアアカウントを使用してユーザーに対処する方法は？

複數(shù)のソーシャルメディアアカウントを持つユーザーの処理は困難です。解決策の1つは、ユーザーがアプリの複數(shù)のソーシャルメディアアカウントを単一のアカウントにリンクできるようにすることです。このようにして、リンクされたアカウントでログインするオプションがあります。

ユーザーがソーシャルメディアアカウントを無効にした場合はどうなりますか？

ユーザーがソーシャルメディアアカウントを無効にした場合、アカウントを使用してアプリにログインすることができなくなります。これを処理するために、ユーザーにメールアドレスまたは電話番號をアカウントに追加するオプションを提供できます。ソーシャルメディアアカウントを無効にすると、この情報をログインできます。

ソーシャルログインボタンの外観をカスタマイズする方法は？

CSSを使用して、ソーシャルログインボタンの外観をカスタマイズできます。ただし、ソーシャルメディアプラットフォームが提供するブランドガイドラインに従ってください。たとえば、Facebookの「F」ロゴは常に元の形式で使用する必要があり、いかなる方法でも変更しないでください。

モバイルアプリにソーシャルログインを使用できますか？

はい、ソーシャルログインはWebおよびモバイルアプリケーションに使用できます。ソーシャルログインをモバイルアプリに統(tǒng)合するプロセスは、Webアプリのプロセスと似ていますが、ソーシャルメディアプラットフォームが提供する特定のSDKを使用する必要がある場合があります。

ソーシャルログイン機能をテストする方法は？

ソーシャルメディアプラットフォームでテストアカウントを作成し、これらのアカウントを使用してアプリにログインすることにより、ソーシャルログイン機能をテストできます。これにより、アプリが開始される前に問題やエラーを特定するのに役立ちます。

ユーザーが使用するソーシャルメディアアカウントに登録するのを忘れた場合はどうすればよいですか？

ユーザーがサインアップするソーシャルメディアアカウントを忘れた場合、メールアドレスまたは電話番號を入力してアカウントにリンクされたソーシャルメディアアカウントのリストを受信できるリカバリオプションを提供できます。

コーディングなしでソーシャルログインを統(tǒng)合できますか？

いくつかのツールとプラグインを使用してコーディングなしでソーシャルログインを統(tǒng)合できますが、コーディングの知識を知ることは有益です。これにより、統(tǒng)合プロセスの柔軟性と制御が可能になり、発生する可能性のある問題を解決するのにも役立ちます。

以上がスパのソーシャルログイン：GoogleとFacebookを介してユーザーを認証するの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。