时间戳

首页 > 解决方案 > 如何从 loginwithPopup url 中删除 response_mode = web_message？

reactjs - 如何从 loginwithPopup url 中删除 response_mode = web_message？

问题描述

我正在使用 Auth0 进行身份验证并做出反应。我正在使用 loginWithPopup()在此处输入图像描述作为登录弹出屏幕。但是每次我最终都会遇到配置错误的错误（就像您在附件中看到的那样）。但是，如果我从它起作用的 URL 中删除 response_mode = web_message，有没有办法从代码中删除 response_mode。鉴于我的 auth0 快速入门，我正在使用 react-auth0-spa.js

import React, { Component, createContext } from 'react';
import createAuth0Client from '@auth0/auth0-spa-js';


// create the context
export const Auth0Context = createContext();

// create a provider
export class Auth0Provider extends Component {
  state = {
    auth0Client: null,
    isLoading: true,
    isAuthenticated: false,
    user: false,
  };
  config = {
    domain: "dev-ufnn-q8r.auth0.com",
    client_id: "zZh4I0PgRLQqLKSPP1BUKlnmfJfLqdoK",
    redirect_uri: window.location.origin,
    //audience: "https://reachpst.auth0.com/api/v2/"
  };

  componentDidMount() {
    this.initializeAuth0();
  }

  // initialize the auth0 library
  initializeAuth0 = async () => {
    const auth0Client = await createAuth0Client(this.config);
    const isAuthenticated = await auth0Client.isAuthenticated();
    const user = isAuthenticated ? await auth0Client.getUser() : null;

    this.setState({ auth0Client, isLoading: false, isAuthenticated, user });
  };

  loginWithPopup = async () => {

    try {
      await this.state.auth0Client.loginWithPopup();
    }
    catch (error) {
      console.error(error);
    }

    this.setState({
      user: await this.state.auth0Client.getUser(),
      isAuthenticated: true,
    });
  };

  render() {
    const { auth0Client, isLoading, isAuthenticated, user } = this.state;
    const { children } = this.props;

    const configObject = {
      isLoading,
      isAuthenticated,
      user,
      loginWithPopup: this.loginWithPopup,
      loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),
      getTokenSilently: (...p) => auth0Client.getTokenSilently(...p),
      getIdTokenClaims: (...p) => auth0Client.getIdTokenClaims(...p),
      logout: (...p) => auth0Client.logout(...p)
    };

    return (
      <Auth0Context.Provider value={configObject}>
        {children}
      </Auth0Context.Provider>
    );
  }
}

标签： reactjsauth0auth0-lock

解决方案

经过一番研究，我找到了自己问题的答案。因此，如果我们使用response_mode = web_message，那么我们还需要在允许的 Web 源字段中配置我们的回调 URL。在我的情况下，我使用 loginWithPopup() 所以它通常会在登录 URL 中添加 response_mode = web_message 因为来自 auth0 SDK 的 loginWithPopup() 是PKCE + web_message https://auth0.com/docs/protocols/oauth2的组合（在响应模式如何工作？） https://auth0.com/blog/introducing-auth0-single-page-apps-spa-js-sdk（在幕后）

推荐阅读