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

时间:2017-09-02 11:01:54

标签: ionic-framework ionic2 ionic3 auth0

有人将auth0-lock-passwordless整合到离子2+混合应用程序中吗?

我不知道如何处理回调网址

我将此代码作为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应用程序设置为本机和单个网页,但没有成功。

以下是我从中获取灵感的一些网站:

为了处理回调,我以为我可以使用离子Deeplinks,但在这之前我想确认这是正确的方法。

一个附带问题是:Deeplinks和Cordova自定义URL插件有什么区别?

1 个答案:

答案 0 :(得分:1)

最好的方法是使用托管的身份验证页面,不推荐使用auth0-lock-passwordless,您将遇到一些问题。

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

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

简而言之,auth0-lock-passwordless路径无法正常工作。