クロム拡張機能でgoogleを使用してログインを作成する方法

Question

Googleログインを統合する必要があるプラグインを作成しました。検索しました

chrome.identity 

Googleアカウントを使用してユーザーを認証してもうまくいきません。

だから

VARマニフェスト= chrome.runtime.getManifest（）以下のコードを使用して溶液に出くわしました。

私はurl変数から v2を削除する場合、私はその成功とリターンコードを v2を追加する場合、それは常に id_tokenと順番にエラーが発生しますが、これでは

var clientId = encodeURIComponent(manifest.oauth2.client_id); 
    var scopes = encodeURIComponent(manifest.oauth2.scopes.join(' ')); 
    var redirectUri = encodeURIComponent('urn:ietf:wg:oauth:2.0:oob:auto'); 

    var url = 'https://accounts.google.com/o/oauth2/v2/auth' + 
       '?client_id=' + clientId + 
       '&response_type=code' + 
       '&redirect_uri=' + redirectUri + 
       '&scope=' + scopes; 

    var RESULT_PREFIX = ['Success', 'Denied', 'Error']; 
    chrome.tabs.create({'url': 'about:blank'}, function(authenticationTab) { 
     chrome.tabs.onUpdated.addListener(function googleAuthorizationHook(tabId, changeInfo, tab) { 
      if (tabId === authenticationTab.id) { 

       var titleParts = tab.title.split(' ', 2); 

       var result = titleParts[0]; 
       if (titleParts.length == 2 && RESULT_PREFIX.indexOf(result) >= 0) { 
        chrome.tabs.onUpdated.removeListener(googleAuthorizationHook); 
        chrome.tabs.remove(tabId); 

        var response = titleParts[1]; 
        switch (result) { 
         case 'Success': 
          // Example: id_token=<YOUR_BELOVED_ID_TOKEN>&authuser=0&hd=<SOME.DOMAIN.PL>&session_state=<SESSION_SATE>&prompt=<PROMPT> 
          console.log("suc:"+response); 
         break; 
         case 'Denied': 
          // Example: error_subtype=access_denied&error=immediate_failed 
          console.log("denied:"+response); 
         break; 
         case 'Error': 
          // Example: 400 (OAuth2 Error)!!1 
          console.log("error:"+response); 
         break; 
        } 
       } 
      } 
     }); 

     chrome.tabs.update(authenticationTab.id, {'url': url}); 
    }); 

。

は、だから今、私は今client_id and client_secretを使用してPOSTリクエストを作成することを言ったのGoogleドキュメントを読んで、私はアプリは、私が何をすべき今client_secret

を持っていないGoogleのコンソール上の資格を作成クロム？私が逃した、またはここで間違っているものは何ですか？また、クロムエクステンションScreencastifyのGoogleログインを使用しています。

誰でもどのように説明できますか？

Answer 1

あなたが参照できるChrome拡張機能/アプリの正式なOAuth tutorial hereがあります。

ここで別のblog tutorialあります：

ステップ1：コピーライブラリ

あなたがのOAuth2と呼ばれるディレクトリにあなたのChrome拡張機能のルートへのOAuth2ライブラリをコピーする必要があります。

ステップ2：次に、あなたは、Googleのアダプタで使用されるリダイレクトURLでコンテンツスクリプトを含めるようにmanifest.jsonをファイルを変更する必要があり

コンテンツスクリプトを注入します。

"content_scripts": [ 
    { 
    "matches": ["http://www.google.com/robots.txt*"], 
    "js": ["oauth2/oauth2_inject.js"], 
    "run_at": "document_start" 
    } 
], 

ステップ3：「マッチ」URIをリダイレクトするには、上記の表で調べることができ、アクセストークンURLはまた

、Googleのアクセストークン付与URLにアクセス許可を追加する必要があります許可しますライブラリはそれに対してXHRを実行するからです。上記の表でアクセストークンURIを参照することもできます。

"permissions": [ 
    "https://accounts.google.com/o/oauth2/token" 
] 

ステップ4：

<script src="/oauth2/oauth2.js"></script> 

ステップ5：設定のOAuth OAuth 2.0のライブラリ

次に、あなたの拡張機能のコードでは、あなたがOAuth 2.0のライブラリを含める必要があります含めます2。0エンドポイント

さらに、登録ページからclientId、clientSecret、およびapiScopesを指定して、OAuth 2接続を設定します。 authorize（）メソッドは、ユーザーが拡張機能にOAuth2エンドポイントへのアクセスを許可するための新しいポップアップウィンドウを作成することがあります。

var googleAuth = new OAuth2('google', { 
    client_id: '17755888930840', 
    client_secret: 'b4a5741bd3d6de6ac591c7b0e279c9f', 
    api_scope: 'https://www.googleapis.com/auth/tasks' 
}); 

googleAuth.authorize(function() { 
    // Ready for action 
}); 

ステップ6：今、あなたのユーザーがauth.getAccessToken（を経由してアクセストークンを持っていることを

アクセストークンを使用します）、あなたはリクエストヘッダ

としてaccessTokenを追加することにより、保護されたデータを要求することができます

xhr.setRequestHeader('Authorization', 'OAuth ' + myAuth.getAccessToken()) 

またはURLの一部として渡すことにより、（サーバの実装に応じて）：

myUrl + '?oauth_token=' + myAuth.getAccessToken(); 

注：認証するOAuth 2.0エンドポイントが複数ある場合は、これを行うこともできます。コンテンツスクリプトを挿入し、権限を与えるすべてのプロバイダの権限を追加するだけです。

これらの概念を使用して実際にはgithub sampleです。