离子 2+ 应用程序中的 Auth0 无密码锁定

Question

是否有人将 auth0-lock-passwordless 集成到 ionic 2+ 混合应用程序中？

不知道怎么处理回调url

我将此代码作为 Angular 服务，称为 auth.service.ts:

import {Storage} from '@ionic/storage';
import {AuthHttp, JwtHelper, tokenNotExpired} from 'angular2-jwt';
import {Injectable} from '@angular/core';
import Auth0LockPasswordless from 'auth0-lock-passwordless'

@Injectable()
export class AuthService {
  private clientID = "XXXXXXXXXXX";
  private domain = "myapp.eu.auth0.com";
  jwtHelper: JwtHelper = new JwtHelper();
  lock: any;
  local: Storage = new Storage()
  user: Object;

  constructor(private authHttp: AuthHttp) {
    // If there is a profile saved in local storage
    this.lock = new Auth0LockPasswordless (this.clientID, this.domain)

    this.local.ready().then(() => {
        this.local.get('profile').then(profile => {
            this.user = JSON.parse(profile);
        })
    }).catch(error => {
      console.log(error);
    });
  }

  public authenticated() {
    // Check if there's an unexpired JWT
    return tokenNotExpired();
  }

  public login() {
    // Show the Auth0 Lock widget
    this.lock.emailcode({
      responseType: 'code',
      authParams: {
        scope: 'openid email',
        device: 'Mobile device'
      }
    }, (err, profile, token, accessToken, state, refreshToken) => {
      // CALLBACK CODE
      if (err) {
      // IF THERE'S AN ERROR, THIS CODE IS EXECUTED
        alert(JSON.stringify(err))
      } else {
       // IF EVERYTHING GOES FINE, THIS CODE IS NEVER CALLED, IT IS SENT TO A CALLBACK URL
      this.local.ready().then(() => {
        alert("profile: " + JSON.stringify(profile))
        alert("id_token: " + JSON.stringify(token))
        alert("refresh_token: " + JSON.stringify(refreshToken))
        alert("state: " + JSON.stringify(state))
        alert("err: " + JSON.stringify(err))
        this.local.set('profile', JSON.stringify(profile));
        this.local.set('id_token', token);
        this.local.set('refresh_token', refreshToken);
        this.user = profile;
        })
      }
    });    
  }

  public logout() {
    this.local.ready().then(() => {
        this.local.remove('profile');
        this.local.remove('id_token');
        this.local.remove('refresh_token');
        this.user = null;
    })
  }
}

我尝试将 Auth0 应用程序设置为本机和单个网页，但没有成功。

以下是我从中获得灵感的一些网站：

为了处理回调，我想我可以使用 ionic Deeplinks，但在开始之前我想确认这是正确的方法。

附带的问题是：Deeplinks 和 Cordova 自定义 URL 插件有什么区别？

Answer 1

最好的方法是使用他们托管的 auth 页面，auth0-lock-passwordless 已被弃用，您会运行遇到一些问题。

电子邮件路径 returns 在典型的 web 场景中，您将进入一个新的回调页面，因此您需要一个实时身份验证回调页面来检查它是否返回令牌，然后对其进行验证。由于这是一个混合应用程序，因此可能有解决方法。 Auth0 支持还可以，但我认为他们没有考虑过这样的混合应用程序。

如果您打算使用多种登录方式，您可能需要设置不同的子账户。托管页面需要在其控制台中添加特定的 js，我无法再访问该代码。

简而言之，auth0-lock-passwordless 路径将不起作用。

离子 2+ 应用程序中的 Auth0 无密码锁定

Auth0 passwordless Lock in ionic 2+ app

ionic-framework

auth0

ionic2

ionic3