首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Auth0回调地址不匹配,在哪里设置回调地址

Auth0回调地址不匹配,在哪里设置回调地址
EN

Stack Overflow用户
提问于 2020-06-17 05:55:06
回答 1查看 1K关注 0票数 0

我刚刚从Auth0下载了React的快速入门代码。我将回调url从window.location.pathname更改为'http://localhost:3000/profile‘。

const DEFAULT_REDIRECT_CALLBACK = () => window.history.replaceState({}, document.title, 'http://localhost:3000/profile');

在Auth0应用程序设置中,我还将允许的回调URL更改为http://localhost:3000/profile

但是,它会显示"http://localhost:3000不在允许的回调URL列表中“。这让我认为我在react-auth0-spa文件中更改重定向回调url失败。

react-auth0-spa:

代码语言:javascript
运行
复制
import createAuth0Client from "@auth0/auth0-spa-js";
console.log(window.location.pathname)
const DEFAULT_REDIRECT_CALLBACK = () =>
  window.history.replaceState({}, document.title, 'http://localhost:3000/profile');

export const Auth0Context = React.createContext();
export const useAuth0 = () => useContext(Auth0Context);````
代码语言:javascript
运行
复制
  children,
  onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
  ...initOptions
}) => {
  const [isAuthenticated, setIsAuthenticated] = useState();
  const [user, setUser] = useState();
  const [auth0Client, setAuth0] = useState();
  const [loading, setLoading] = useState(true);
  const [popupOpen, setPopupOpen] = useState(false);
  useEffect(() => {
    const initAuth0 = async () => {
      const auth0FromHook = await createAuth0Client(initOptions);
      setAuth0(auth0FromHook);

      if (
        window.location.search.includes("code=") &&
        window.location.search.includes("state=")
      ) {
        const { appState } = await auth0FromHook.handleRedirectCallback();
        onRedirectCallback(appState);
      }

      const isAuthenticated = await auth0FromHook.isAuthenticated();

      setIsAuthenticated(isAuthenticated);

      if (isAuthenticated) {
        const user = await auth0FromHook.getUser();
        setUser(user);
      }

      setLoading(false);
    };
    initAuth0();
    // eslint-disable-next-line
  }, []);
 const loginWithPopup = async (params = {}) => {
    setPopupOpen(true);
    try {
      await auth0Client.loginWithPopup(params);
    } catch (error) {
      console.error(error);
    } finally {
      setPopupOpen(false);
    }
    const user = await auth0Client.getUser();
    setUser(user);
    setIsAuthenticated(true);
  };

  const handleRedirectCallback = async () => {
    setLoading(true);
    await auth0Client.handleRedirectCallback();
    const user = await auth0Client.getUser();
    setLoading(false);
    setIsAuthenticated(true);
    setUser(user);

  };
  return (
    <Auth0Context.Provider
      value={{
        isAuthenticated,
        user,
        loading,
        popupOpen,
        loginWithPopup,
        handleRedirectCallback,
        getIdTokenClaims: (...p) => auth0Client.getIdTokenClaims(...p),
        loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),
        getTokenSilently: (...p) => auth0Client.getTokenSilently(...p),
        getTokenWithPopup: (...p) => auth0Client.getTokenWithPopup(...p),
        logout: (...p) => auth0Client.logout(...p)
      }}
    >
      {children}
    </Auth0Context.Provider>
  );
};
EN

回答 1

Stack Overflow用户

发布于 2020-06-17 06:10:32

我刚刚想到应该把redirect_url从window.location.origin改成window.location.origin + '/profile‘,而不是改成DEFAULT_REDIRECT_CALLBACK。然而,我仍然不确定redirect_uri是如何工作的。

代码语言:javascript
运行
复制
ReactDOM.render(
    <Auth0Provider
        domain={config.domain}
        client_id={config.clientId}
        redirect_uri={window.location.origin + '/profile'}
        onRedirectCallback={onRedirectCallback}
    >
        <App />
    </Auth0Provider>,
    document.getElementById("root")
);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62418181

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档