1

當我嘗試登錄時,登錄窗口按預期彈出,但它給了我這個錯誤。獲取「Realm不匹配redirect_uri/origin。錯誤代碼:2」

Error: invalid_request 
Realm didn't match redirect_uri/origin. Error code: 2 

Request Details: 

openid.realm=localhost:8080/oauth2callback 
scope=email profile openid https://www.googleapis.com/auth/userinfo.email 
response_type=permission 
redirect_uri=storagerelay://http/localhost:8080?id=auth435566 
ss_domain=http://localhost:8080 
client_id=SOME_STRING_ID.apps.googleusercontent.com 
fetch_basic_profile=true 

我通過Open ID 2.0 documentation和我對它的理解看,物業openid.realm,應該是同我的重定向的URI之一。

下面是從憑據部分開發者控制檯我的「授權的重新導向的URI」:

https://myapp-1234.appspot.com/oauth2callback 
http://myapp-1234.appspot.com/oauth2callback 
http://localhost:8080/oauth2callback 

我設置openid.realmlocalhost:8080/oauth2callback因爲此刻我只是想試探我的應用程序,但我已經試過其他在部署和我仍然得到相同的結果,但具有不同的錯誤代碼。

這裏就是我調用signIn()方法:

var authConfig = { 
    client_id: 'SOME_STRING_ID.apps.googleusercontent.com', 
    cookie_policy: 'single_host_origin', 
    scope: 'https://www.googleapis.com/auth/userinfo.email profile', 
    openid_realm: 'localhost:8080/oauth2callback' 
} 

window.handleGoogleClientLoad = function() { 
gapi.client.load('myapp_endpoints', 'v1', null, '//' + window.location.host + '/_ah/api'); 
console.log('API LOADED'); 
} 

//===================================================================================== 

function authorizeUser() { 
    gapi.load('auth2', function() { 
     gapi.auth2.init(authConfig) 
      .then(function() { 
       var auth2 = gapi.auth2.getAuthInstance(); 
       var user = auth2.signIn(); 
       console.log(user); 
     }); 
    }); 
} 

module.exports = { 
    login: authorizeUser 
} 

這裏是index.html的

<!DOCTYPE html> 
<head> 
<meta charset="utf-8"> 
    <title>My App</title> 
</head> 

<body> 
    <div id="root"></div> 
    <script src="lib/vendors.js"></script> 
    <script src="build/bundle.js"></script> 
</body> 

+1

你有沒有得到這個解決?我遇到了同樣的問題。 –

+0

@Jason Malcolm對延期回覆道歉。但我只是給這個問題添加了一個答案,所以請檢查一下。希望它適合你。 – hellomoto

回答

1

的問題是,我用錯了谷歌的API庫。我正在使用從npm獲得的庫。然後我導入了模塊。

import GoogleApis from 'googleapis' 

我是什麼意思做的卻是使用能夠從自己的website下載庫。 Integrating這很方便。你所要做的就是將下面的代碼添加到你的index.html。然後

<script src="https://apis.google.com/js/platform.js" async defer></script> 

的文件應該是這樣的

<!DOCTYPE html> 
<head> 
<meta charset="utf-8"> 
    <title>Welcome to MyApp</title> 
</head> 

<body> 
    <div id="root"></div> 
    <script src="lib/vendors.js"></script> 
    <script src="build/bundle.js"></script> 
    <script src="https://apis.google.com/js/platform.js?onload=init" async defer></script> 
    <!-- init is the function that will get invoked when the page loads. --> 
</body> 

然後我在我的JavaScript改變。您可以從他們的code examples中找到這些更改的參考。

const authConfig = { 
    client_id: 'my_app.apps.googleusercontent.com', 
    cookie_policy: 'single_host_origin', 
    scope: 'https://www.googleapis.com/auth/userinfo.email profile', 
    fetch_basic_profile: true 
} 

window.init = function() { 
    gapi.load('auth2', function() { 
     var auth2 = gapi.auth2.init(authConfig); 
     auth2.signIn().then(function() { 
      if(auth2.isSignedIn.get()) { 
       var profile = auth2.currentUser.get().getBasicProfile(); 

       console.log('ID: ' + profile.getId()); 
       console.log('Full Name: ' + profile.getName()); 
       console.log('Email: ' + profile.getEmail()); 
      } 
     }); 
    }); 
} 
相關問題