web-dev-qa-db-ja.com

Auth0コールバックURLの不一致

反応アプリでauth0を使用してLinkedIn認証を行っています。設定のコールバックURLにlocalhost:3000/uploadを設定しました。ユーザーがlocalhost:3000/loginにログインすると、localhost:3000/uploadにリダイレクトされるようになっています。ただし、常に次のエラーが発生します。urllocalhost:3000/loginがコールバックURLのリストにありません。ログイン後にauth0がログインしたばかりのページに戻ることを期待するのはなぜですか。異なるURLではないはずです。それは私には意味がありません。

編集：

export default class AuthService {
  constructor(clientId, domain) {
    // Configure Auth0
    const options = {
      allowedConnections: ['linkedin'],
      auth: {
        params: {responseType: 'code'}
      }
    };  
    this.lock = new Auth0Lock(clientId, domain, options)
    // Add callback for lock `authenticated` event
    this.lock.on('authenticated', this._doAuthentication.bind(this))
    // binds login functions to keep this context
    this.login = this.login.bind(this)
    this.loggedIn = this.loggedIn.bind(this)
  }

  _doAuthentication(authResult){
    // Saves the user token
    console.log(authResult);
    this.setToken(authResult.idToken)
    this.lock.getProfile(authResult.idToken, (error, profile) => {
      if (error) {
        console.log('Error loading the Profile', error)
      } else {
        console.log(profile)
      }
    })
  }
//....
authenticationreactjsauth0social-authentication
11
shangsunset

次の2つを確認してください。

1）。あなたの反応アプリコードで

 responseType: 'code'

2）。 Auth0ダッシュボードの[設定]-> [許可されたコールバックURL]で、コールバックエントリ（localhost：3000/upload）を入力します-これは念のためです。

enter image description here

それでも問題が解決しない場合はお知らせください。

10
arcseldon

Auth0設定サイトに貼り付けるときは、URL間のカンマの間に特別な隠し文字やスペースがないことを確認してください。私はこのユーティリティに気づかなかったので、すべてのURLをVimに入れて、上記のようなケースがあることを確認しました。

2
Thai Tran

認証が成功した後で別のURLにリダイレクトするには、次のようにredirectUrlをLockに提供する必要があります。

// Auth0 constオプションを構成します= {allowedConnections：['linkedin']、auth：{responseType： 'code'、redirectUrl： ' http：// localhost：3000/upload '}};
this.lock = new Auth0Lock（clientId、domain、options）

（responseTypeオプションはauth.paramsではなくauthの下にあることに注意してください。）

リダイレクトを行うと、ログインページで定義したイベントハンドラに到達しません。宛先ページにイベントハンドラーを追加（またはresponseType:tokenを使用）するか、サーバーコードで認証結果を処理する必要があります（これは、responseType: codeを要求する場合に通常行うことです） 。

2
Nico Sabena

auth0設定でコールバックUrlを設定する必要がある理由。誰でもクライアントIDを使用してgoogleまたはlinkedinにリクエストを送信でき、設定した場所への応答を取得できます。ただし、この設定では、その応答にのみアクセスできます。

アプリがlinkedinからデータをプルすることが承認されると、linkedinは指定された場所にデータを送信します。 Linkedinサーバーからの応答を処理するページを作成する必要があります。そのページに名前を付けましょうcallback.jsこれは、応答オブジェクトの例です。

accessToken: "hNuPLKTZHiE9_lnED0JIiiPNjlicRDp"
   appState: null
   expiresIn: 7200
   idToken: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik5FRXdSVUl5TURVeE4wSkJPRFZEUlRKRU1EVkZNemsxTXpNNU5VTXlNRGt6T0VWQlJqUkZRUSJ9.eyJodHRwOi8vbG9jYWxob3N0OjMwMDAvcm9sZSI6InNpdGVPd25lciIsImdpdmVuX25hbWUiOiJvbWFyIiwiZmFtaWx5X25hbWUiOiJpYm8iLCJuaWNrbmFtZSI6Im9tYXJpYm8xOTgyIiwibmFtZSI6Im9tYXIgaWJvIiwicGljdHVyZSI6Imh0dHBzOi8vbGg1Lmdvb2dsZXVzZXJjb250BQUFBQUkvQUFBQUFBQUFBQUEvQUNIaTNyLTEwLTEyVDIyOjU4OjAxLjgzM1oiLCJpc3MiOiJodHRwczovL3BvcnRmb2xpby15aWxtYXouYXV0aDAuY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTE0MDY0NTA2ODI2OTgwNTA5ODY3IiwiYXVkIjoiUEdVY242RjRRS21PRkJhb1k0UFdCeWpjVzIyT09vNGMiLCJpYXQiOjE1NzA5MjEwODIsImV4cCI6MTU3MDk1NzA4MiwiYXRfaGFzaCI6InN0R1l5SnJaMHNnbVYzSWNLWjlPeFEiLCJub25jZSI6InRrOV95b096enRmVThVVjFVMlVFR3IyMW5ORW5abjk4In0.TYS7mM8N2d7jEHFdWQGTSeAAUaDt4-0SMUG3LrcQ1r3xzY0RMGsUsEszj5xqk1GE0cIlFS10xCOYKsuHSwsFLomC1EbLjntjkledHtfD0MW84cMoXN6a-x-1-bNwl3lMYJ98qklTrNvTvkQJ6DWhei3hJ8rs8dnbNyCfckNVU6ptJU-9ef1DwWfHRomW5LQ6WSDRHZScW697gdgBEMU-Nd2SddyHhQe0kVh6lKdcbnskEAyCJLE07jfM40RQI_8LJouFcpoyImcXSDZlKv90tYfVDq9_TwE3GNaSz5I5snn0457oCgz0vuX0JoCUiaDuTIX7XiyXnozW_DxGMuhk4w"
   idTokenPayload: {http://localhost:3000/role: "siteOwner", given_name: "me", family_name: "you", nickname: "nck", name: "nm", …}
   refreshToken: null
  scope: null
   state: "xkEbffzXbdOYPLkXOUkrQeb0Jysbnlfy"
   tokenType: "Bearer"
//THIS CODE IS FOR NEXT.JS9
//auth.js
class Auth0 {
  constructor() {
    this.auth0 = new auth0.WebAuth({
      domain: "portfolio-ys.auth0.com",
      clientID: "PGUWJQKmOFBaoY4PWByjcW22OOo4c",
      redirectUri: "http://localhost:3000/callback",
      responseType: "token id_token",
      scope: "openid profile"
    });

     this.handleAuthentication = this.handleAuthentication.bind(this);
  }
     //there are too many methods are defined here i put only relevant ones
    handleAuthentication() {
        return new Promise((resolve, reject) => {
          this.auth0.parseHash((err, authResult) => {
            console.log(authResult);
            if (authResult && authResult.accessToken && authResult.idToken) {
              this.setSession(authResult);
              resolve();
            } else if (err) {
              reject(err);
            }
          });
        });
      }

setSession function is where you set the cookies based on response object. I use js-cookie package to set the cookie.

    setSession(authResult) {
        const expiresAt = JSON.stringify(
          authResult.expiresIn * 1000 + new Date().getTime()
        );
        Cookies.set("user", authResult.idTokenPayload);
        Cookies.set("jwt", authResult.idToken);
        Cookies.set("expiresAt", expiresAt);
      }


}
const auth0Client = new Auth0();
export default auth0Client;


callback.js
import React from "react" 
import auth0Client from "./auth0"
import {withRouter} from "next/router"

 class Callback extends React.Component{
    async componentDidMount(){
        await auth0Client.handleAuthentication()
        this.props.router.Push('/')
    }
    render() {
        return (

                    <h1>verifying logging data</h1>

        )
    }
}

export default withRouter(Callback) //this allows us to use router
0
Yilmaz