Auth0 回调 URL 不匹配以及我们在哪里设置回调 URL

Posted 2023-03-08

【中文标题】Auth0 回调 URL 不匹配以及我们在哪里设置回调 URL

【英文标题】：Auth0 callback URL mismatch and where do we set the callback URL

【发布时间】：2020-10-06 15:12:11

【问题描述】：

我刚刚从 Auth0 下载了 React 的快速启动代码。我将回调 url 从 window.location.pathname 更改为“http://localhost:3000/profile”。

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

在 Auth0 应用程序设置中，我还将 Allowed Callback URLs 更改为 http://localhost:3000/profile。

但是，它显示“http://localhost:3000 不在允许的回调 URL 列表中”。这让我觉得我未能在 react-auth0-spa 文件中更改重定向回调 url。

react-auth0-spa：

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

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

【参考方案1】：

我刚刚发现我应该从 window.location.origin 将 redirect_url 更改为 window.location.origin + '/profile'，而不是更改 DEFAULT_REDIRECT_CALLBACK。但是，我仍然不确定 redirect_uri 是如何工作的。

ReactDOM.render(
    <Auth0Provider
        domain=config.domain
        client_id=config.clientId
        redirect_uri=window.location.origin + '/profile'
        onRedirectCallback=onRedirectCallback
    >
        <App />
    </Auth0Provider>,
    document.getElementById("root")
);