So erstellen Sie eine Anmeldung mit Google in Chrome-Erweiterung

Question

Ich habe gerade erst ein Plugin erstellt, in dem ich Google Login integrieren muss. Ich suchte und fand

, um Benutzer mit Google-Konto zu authentifizieren, aber das funktioniert nicht gut.

ich auf eine Lösung So kam unter

var manifestieren diesen Code mit Hilfe = chrome.runtime.getManifest();

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}); 
    }); 

In der, wenn ich v2 aus dem URL-Variable entferne dann gibt es immer Fehler in der wiederum mit id_token aber wenn ich v2 dann seinem Erfolg hinzufügen und Code zurück.

So, jetzt habe ich gelesen, Google-Dokumentation, die sagten, dass jetzt eine Post-Anforderung client_id and client_secret mit erstellen, aber ich Chrome-App erstellen Anmeldeinformationen auf Google-Konsole, die nicht client_secret

Nun hat, was soll ich tun? Gibt es irgendwas was ich hier verpasst oder falsch gemacht habe und ich auch auf eine der Chrome-Extension Screencastify google login gestoßen bin.

Kann jemand erklären, wie sie es tun?

Answer 1

Es gibt eine offizielle OAuth tutorial here für Chrome-Erweiterungen/Apps, auf die Sie verweisen können.

Es gibt einen anderen blog tutorial hier:

Schritt 1: Kopieren Bibliothek

Sie müssen die oauth2 Bibliothek in Ihre Chrome-Erweiterung Wurzel in ein Verzeichnis mit dem Namen oauth2 kopieren.

Schritt 2: Injizieren Sie die Content-Skript

Dann müssen Sie Ihre manifest.json Datei enthält einen Content-Skript an der Umleitungs-URL durch die Google-Adapter verwendet ändern.

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

Schritt 3: Lassen Sie Token URL-Zugriff

Außerdem müssen Sie eine Genehmigung von Google-Zugriffstoken Gewährung URL hinzufügen Die „matches“ URI umleiten kann oben in der Tabelle nachgeschlagen werden , da die Bibliothek ein XHR dagegen machen wird. Die Zugriffstoken-URI kann auch in der obigen Tabelle nachgeschlagen werden.

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

Schritt 4: Fügen Sie die OAuth 2.0 Bibliothek

Als nächstes wird im Code Ihrer Erweiterung des, sollten Sie die OAuth 2.0-Bibliothek enthalten:

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

Schritt 5: Konfigurieren Sie die OAuth 2.0 endpoint

Konfigurieren Sie Ihre OAuth 2-Verbindung, indem Sie clientId, clientSecret und apiScopes über die Registrierungsseite bereitstellen. Die Methode authorize() erstellt möglicherweise ein neues Popup-Fenster, in dem der Benutzer Ihrer Erweiterung Zugriff auf den OAuth2-Endpunkt gewährt.

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 
}); 

Schritt 6: Verwenden Sie den Zugriffstoken

Nun, da Ihr Benutzer ein Zugriffstoken über auth.getAccessToken() verfügt, können Sie die Daten geschützt Wunsch als Anfrage-Header

durch die accessToken Zugabe

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

oder indem es als Teil der URL (in Abhängigkeit von der Server-Implementierung) Hindurchleiten:

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

Hinweis: Wenn Sie mehrere OAuth 2.0-Endpunkte haben, mit denen Sie autorisieren möchten, können Sie das auch tun! Fügen Sie einfach Inhaltsskripte ein und fügen Sie Berechtigungen für alle Anbieter hinzu, mit denen Sie autorisieren möchten.

Und hier ist die tatsächliche github sample mit diesen Konzepten.