0

JavaScript を使用して Google フォトからアルバムを読み込もうとしていますが、API の仕組みがわかりません。Google フォト APIを読み始めましたが、運がありません。アルバムの写真のリストを取得するためのコード リファレンスはありますか?

私はこれを見つけましたが、動作しません

<script>   

var scopeApi = ['https://www.googleapis.com/auth/photoslibrary', 'https://www.googleapis.com/auth/photoslibrary.readonly', 'https://www.googleapis.com/auth/photoslibrary.readonly.appcreateddata'];

function onAuthPhotoApiLoad() {
    window.gapi.auth.authorize(
        {
            'apiKey': 'MY_API_KEY',
            'client_id': "MY_CLIEND_ID",
            'scope': scopeApi,
            'immediate': false
        },
        handlePhotoApiAuthResult);
}


function handlePhotoApiAuthResult(authResult) {
    if (authResult && !authResult.error) {
        oauthToken = authResult.access_token;

            GetAllPhotoGoogleApi();
    }
}


function GetAllPhotoGoogleApi() {
    gapi.client.request({
        'path': 'https://photoslibrary.googleapis.com/v1/albums',
        'method': 'POST' 
    }).then(function (response) {
        console.log(response);     

    }, function (reason) {
        console.log(reason);
    });
}

onAuthPhotoApiLoad();

4

1 に答える 1

2

Photos 同期スクリプトを開発する過程で、私はOauth 2.0 ドキュメントの調査とテストに数日を費やしました。理解することはたくさんありますが、この Cliff-notes バージョンが役立つことを願っています。

  1. アプリのセットアップまず、 console.developers.google.com /の開発者コンソールからアプリケーション構成を取得し、写真データが共有されていることを確認する必要があります。

    次のような JSON ファイルを取得します。

        {"installed":{
     "client_id":"xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
     "project_id":"xxxx-xxxxxxxx-123456",
     "auth_uri":"https://accounts.google.com/o/oauth2/auth",
     "token_uri":"https://accounts.google.com/o/oauth2/token",
     "auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs",
     "client_secret":"xxxxxxxxxxxxxxxxxxxxxxxx",
     "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]
     }}

  2. Request Authorization Code - 次に、これらの値を使用して認証トークンを取得するコードを記述する必要があります。基本的には、ユーザーがアプリケーションにデータへのアクセスを許可したことを示す文字列です。クエリ文字列に次の値を指定して、auth_uri エンドポイントにリクエストを送信します。

    • scope - developers.google.com/photosからのスコープのスペース区切りのリストで、ユーザーにこれらの機能へのアクセスを許可することを示します
    • redirect_uri - 着信クエリ文字列をキャプチャできる所有する URL
    • client_id - ステップ 1 の開発者設定から
    • 状態 - 32 のランダム バイト、base64 でエンコードされ、"+"、"/"、"=" をそれぞれ "-"、"_"、"" に置き換えることで URL フレンドリーに
    • code_challenge - 別の 32 ランダム バイトの SHA256 ハッシュで、base64 でエンコードされ、URL フレンドリーに作成されています
    • code_challenge_method - "S256" (引用符なし)

  3. 承認の往復この構成された URI をユーザーのブラウザーに送信すると、ユーザーは Google アカウントを選択し、どのスコープが要求されているかを示すことができます。そのフォームが送信されると、クエリ文字列 (メソッド = GET) の値を使用して、redirect_uri にリダイレクトされます。

    • code - アクセス トークンのリクエストに使用できる認証コード
    • state - ハッシュに対して検証するために使用できる文字列

  4. access_token を取得する最後に、すべての API 要求の HTTP ヘッダーに入れる OAuth AccessToken の認証コードを交換します。リクエストはステップ 1 の token_uri に送られ、次のリクエスト ボディ (メソッド = POST) パラメーターがあります。

    • コード - 手順 3 でリダイレクト クエリ文字列から取得したもの
    • redirect_uri - 上記と同じですが、これは使用できません
    • client_id - 構成から
    • code_verifier - ハッシュされる前の code_challenge
    • client_secret - 構成から
    • スコープ - ここは空にすることができます
    • grant_type - "authorization_code" (引用符なし)

  5. アクセス トークンを使用するそのリクエストからの応答には、access_token と refresh_token が含まれます。API リクエストの HTTP ヘッダーで、有効期間が短い access_token をすぐに使用できます。有効期間が長い refresh_token を保存して、再度認証することなく新しい access_token を取得できるようにします。

それが要点です。私の Powershell スクリプトを参照して、承認と認証のフローの例を確認してください。残りの部分は少しバグがあり不完全ですが、動作します。アルバムをページングすると、401 エラーが発生することがあります。

于 2018-08-21T22:13:26.010 に答える