Facebookアプリケーション開発の認証および承認プロセスの例

少し前に、作業の必要性のために、fbへの許可されたログインと、対応するアクセストークン（access_token）、つまり許可されたログインを取得しました。Facebookアプリケーション開発関連の問題を調査し、公式APIドキュメントを読み、情報を整理して共有しました。この記事は、Facebookの認証と承認に関する情報の並べ替えと、記事を要約するための私自身の実際のテストについてです。皆さんのお役に立てば幸いです。

Facebookプラットフォームは、認証および承認プロトコルとしてOAuth2プロトコルを使用し、サーバーサイドフローとクライアントサイドフローの2つの認証プロセスがあります。これらの認証プロセスは、Webサイトアプリケーション、モバイルアプリケーション、またはデスクトップアプリケーションの開発に使用できます。

このドキュメントでは、ユーザーログインの例を使用し、Facebookでサポートされている2つの認証および承認プロセスの概要を説明します。この例では、サーバーはpython-flaskを使用し、クライアントはHTML / JavaScript（JS SDK）を使用しますが、これらは簡単にその他に変換できます。プログラミング言語。サーバー側とクライアント側の2つの認証および承認プロセス。サーバー側プロセスでは、WebサーバーがGraph APIを呼び出して認証と承認を完了し、クライアント側プロセスでは、クライアントがGraphAPIを呼び出して認証を完了します。また、ブラウザ、ローカルモバイルアプリケーション、デスクトップアプリケーションで実行されているjavascriptの使用などの認証。

使用するプロセスに関係なく、ユーザー認証、アプリケーション認証、アプリケーション認証のいくつかのステップがあります。ユーザー認証はユーザーの正確さを保証し、アプリケーション承認はユーザーがアプリケーションに承認したデータと機能を正確に知ることを保証し、アプリケーション認証はユーザーが他のアプリケーションではなくこのアプリケーションに情報を提供することを保証します。認証と承認が完了すると、アプリケーションはアクセストークンを使用してユーザーの情報にアクセスし、ユーザーに代わって操作を実行できます。

参考資料の中で：

https://developers.facebook.com/docs/facebook-login
https://developers.facebook.com/docs/marketing-api/access/

1.サーバー側の承認
この例は、実用的な説明として主にpython-flask開発に基づいています。すべてのコールバックURLにhttpsが必要な場合、コールバックテストURL：https：// test / main /
homeredirect_uriコールバックURLは次のようになります。アプリで事前設定済みFacebookログインのOAuthリダイレクトURIでは、ホワイトリストを信頼できます。そうしないと、正常に認証できません

1.ユーザーがフロントエンドページの認証ボタンまたはログインボタンをクリックすると、認証されたログインページにリダイレクトされます。

https://www.facebook.com/v3.3/dialog/oauth?client_id={
    
    client_id}&redirect_uri={
    
    redirect_uri}&scope={
    
    scope}&response_type=code&state={
    
    state}

パラメータの紹介：
client_id：facebook
redirect_uriによって作成されたアプリケーションID ：ユーザーが正常または失敗した後、コールバック（リダイレクト）アドレス、facebook検証により、ブラウザに保存されているCookie情報が表示されます（この時点でユーザーがすでにログインしている場合）。認証が完了しました。ログインしていない場合は、次のインターフェイスに戻ります。ユーザーが情報を入力したら、ログイン
スコープをクリックします。アクセス許可リスト。ユーザーに許可する必要のあるアクセス許可のコレクションで、カンマで区切ります。、read_stream
状態：ランダムな文字列、当面は何をすべきかわからない

2.ログインが成功すると、認証確認ページに移動します。確認されると、redirect_uriで指定されたパスにリダイレクトされ、URLパスの後にコードパラメーターがスプライスされます。コードパラメーターは非常に重要です。。access_tokenは後でパラメータとしてコードを必要とするため、取得したコードは1回しか使用できず、すぐに無効になります。
3.一連のフロントエンド操作に従ってコードを取得し、それを使用してワンクリックでaccess_tokenを取得します。

https://graph.facebook.com/oauth/access_token?client_id={
    
    client_id}&redirect_uri={
    
    redirect_uri}&client_secret={
    
    client_secret}&code={
    
    code}

パラメータの紹介：
client_id：
facebookによって作成されたアプリケーションID client_secret：facebookによって作成されたアプリケーションキー
redirect_uri：ユーザーログインが成功または失敗した後のコールバック（リダイレクト）アドレス、今回ユーザーがログに記録した場合、facebook認証はブラウザに保存されたCookie情報をもたらしますで、認証が完了します。ログインしていない場合は、次のインターフェイスに戻り、ユーザーが情報を入力した後、ログイン
コードをクリックします。前回の認証ログインで取得したコードデータ

インスタンスリクエストの結果：

1.コードを取得します

https://www.facebook.com/v3.3/dialog/oauth?client_id=client_id&redirect_uri=https://test/main/home&scope=ads_management,ads_read,email,public_profile,manage_pages,pages_show_list,publish_pages,business_management,pages_manage_cta&response_type=code&state=asaswqdcszq

結果：

https://graph.facebook.com/oauth/access_token?client_id=client_id&redirect_uri=https://test/main/home&client_secret=client_secret&code=AQAb9BtXhfQ0OsqTYyLZiuVgPKpMJI9gBRImU_xOwsv26vpXWap5yERv2kB1UgUSOzAoSsJ5w_8hqhlUDVAzeHAh7qlc6O8XrvtqlA5zFpgMLr1M06EXfK0M9T8Y38q3YjO1qmsmWh_BgL87ZKXZELBAWzCBe1MCY6cgbvaQ0kI0jdu7_SVCdRUHFPgZOW7A3RHta0MvQhbb1bhMgch51O7uXf6zIfATv4Tt7AbItKo9qCS5Ory9CozC4l2mqOMPIXtVrRRMy0ZZI75NNO7uycdO23E4plPy8NF8lx_nnadCy_63guD-M-Ush1_qRVJBT2sfnH_fzh9lpdCZ1CX5Rqiq

2.トークンを取得します

https://graph.facebook.com/oauth/access_token?client_id=client_id&redirect_uri=https://test/main/home&client_secret=client_secret&code=AQAb9BtXhfQ0OsqTYyLZiuVgPKpMJI9gBRImU_xOwsv26vpXWap5yERv2kB1UgUSOzAoSsJ5w_8hqhlUDVAzeHAh7qlc6O8XrvtqlA5zFpgMLr1M06EXfK0M9T8Y38q3YjO1qmsmWh_BgL87ZKXZELBAWzCBe1MCY6cgbvaQ0kI0jdu7_SVCdRUHFPgZOW7A3RHta0MvQhbb1bhMgch51O7uXf6zIfATv4Tt7AbItKo9qCS5Ory9CozC4l2mqOMPIXtVrRRMy0ZZI75NNO7uycdO23E4plPy8NF8lx_nnadCy_63guD-M-Ush1_qRVJBT2sfnH_fzh9lpdCZ1CX5Rqiq

結果：

{
    
    
    "access_token": "EAAY8lTqahuABAA91OO0mfZB0XZBOkJsKG6GykI2rZBBOEJcE5eBRkzZCtSx0Fry5Ax40EZBj6BdVG0QWhCE1ag7ZBCore5pRX7JbOpXOEjyYg7caAxHLssjajsdjsqmwnhfsxckKSA152266554sDhThh4gVNYAzHQH88bxKmT3xTGPSM",
    "token_type": "bearer"
}