Identity Toolkit 不工作 - 错误代码：来自 IDP 的错误响应

Question

我目前无法解决的问题是bad response from IDP，原因应该是缺少mode=select，但我现在不知道mode=select 必须实施

事实上，我已将代码添加到两个单独的页面中，第一个是 index.php，它执行以下操作：

<script type="text/javascript" src="//www.gstatic.com/authtoolkit/js/gitkit.js"></script>
<script type="text/javascript">
var config = {
apiKey: 'AIzaSyAaMAfu7S2AITODrGJzVkIYBXlZR3FYhuQ',
signInSuccessUrl: 'http://www.lascuolacheverra.org/signin?mode=select', // i tried to add the `mode=select here`
signInOptions: ["google", "password"],
idps: ["Google", "AOL", "Microsoft", "Yahoo", "Facebook"],
oobActionUrl: '/',
siteName: 'La scuola che verrà A.P.S.',
    
    // Optional - function called after sign in completes and before
    // redirecting to signInSuccessUrl. Return false to disable
    // redirect.
    // callbacks: {
    //  signInSuccess: function(tokenString, accountInfo,
    //    opt_signInSuccessUrl) {
    //      return true;
    //    }
    // },
    
    // Optional - key for query parameter that overrides
    // signInSuccessUrl value (default: 'signInSuccessUrl')
    // queryParameterForSignInSuccessUrl: 'url'
    
    // Optional - URL of site ToS (linked and req. consent for signup)
     tosUrl: 'http://www.lascuolacheverra.org/privacypolicy.html',
    
    // Optional - URL of callback page (default: current url)
    // callbackUrl: 'http://example.com/callback',
    
    // Optional - Cookie name (default: gtoken)
    //            NOTE: Also needs to be added to config of the ‘page with
    //                  sign in button’. See above
    // cookieName: ‘example_cookie’,
    
    // Optional - UI configuration for accountchooser.com
    acUiConfig: {
     title: 'Sign in to lascuolacheverra.org',
     favicon: 'http://www.lascuolacheverra.org/favicon.ico',
     branding: 'http://www.lascuolacheverra.org/images/lascuolacheverra.jpg'
     },
    
    
    // Optional - Function to send ajax POST requests to your Recover URL
    //            Intended for CSRF protection, see Advanced Topics
    //      url - URL to send the POST request to
    //     data - Raw data to include as the body of the request
    //completed - Function to call with the object that you parse from
    //            the JSON response text. {} if no response
    /*ajaxSender: function(url, data, completed) {
     },
     */
};
// The HTTP POST body should be escaped by the server to prevent XSS
window.google.identitytoolkit.start(
                                    '#gitkitWidgetDiv', // accepts any CSS selector
                                    config,
                                    '{{ POST_BODY }}');
</script>

<!-- End modification -->

代码的第二部分在另一个 index.php 中并执行以下操作：

<!DOCTYPE html>
<html>
<head>

<!-- Copy and paste here the "Sign-in button javascript" you downloaded from Developer Console as gitkit-signin-button.html -->

<script type="text/javascript" src="//www.gstatic.com/authtoolkit/js/gitkit.js"></script>
<link type=text/css rel=stylesheet href="//www.gstatic.com/authtoolkit/css/gitkit.css" />
<script type=text/javascript>
window.google.identitytoolkit.signInButton(
                                           '#navbar', // accepts any CSS selector
                                           {
                                           widgetUrl: "/widget",
                                           signOutUrl: "/",
                                           }
                                           );
</script>

<!-- End configuration -->

</head>
<body>

<!-- Include the sign in button widget with the matching 'navbar' id -->
<div id="navbar"></div>
<!-- End identity toolkit widget -->

<p>
{{ CONTENT }}
</p>
</body>
</html>

我想知道如何才能正确使用 mode=select，因为从今天起我的主页可以使用 Identity Toolkit，但由于这个错误，我无法充分利用它.

Answer 1

您需要创建两个页面。假设 url1 和 url2.

url1 您通过运行:

添加登录按钮

window.google.identitytoolkit.signInButton()

将 widgetUrl 设置为 url2

在 url2 中，您通过运行呈现小部件：

window.google.identitytoolkit.start()

将 signInSuccessUrl 设置为 url1

不要将 ?mode=select 添加到小部件 url。单击登录按钮后，它会自动将其附加到 url 并重定向到那里。

Answer 2

signInSuccessUrl: 'http://www.lascuolacheverra.org/signin?mode=select', // i tried to add the mode=select here

这不应指向 /signin 页面。也许将其指向 / 或 /signed-in。

此外，删除

// signInOptions: ["google", "password"], // <-- this apparently masks out the idps

idps: ["Google", "AOL", "Microsoft", "Yahoo", "Facebook"],

我对此做了一些测试，如果我添加 signInOptions，idps 将被忽略，你最终只能使用 google 和密码登录。

显然只使用了 signInOptions is the way to do it。我在其他示例中阅读了 idps 而不是 signInOptions，并且我成功地使用了 idps。

Update 我有点看错了代码。我以为 \signin 是显示小部件的页面，教程将其放在 \widget 下。我的错误是因为在我的项目中我将 \widget 替换为 \secure-sign-in。因此，如果您的 \signin 页面不是 \widget 页面，那么您的代码就已经可以了。在任何情况下，您都应该删除 ?mode=select，因为它仅用于 \widget，并由 window.google.identitytoolkit.signInButton 函数自动添加。

Answer 3

嗯，我刚遇到同样的错误"Error code: Bad response from IDP."

正如上面的评论所述，有两种可能性：

创建一个仅包含登录按钮的页面，以及前一个页面在单击按钮时重定向到的另一个页面
将 "?mode=select" 作为查询参数附加到 url

在您的路线中重定向，例如在

app.get("/login", function(req, res) {
  res.redirect("/login?mode=select");        
}

来自浏览器的 gitkit.js extracts it window.location.href。

Identity Toolkit 不工作 - 错误代码：来自 IDP 的错误响应

Identity Toolkit does not work - Error code: Bad response from IDP

html

javascript

google-identity-toolkit