Auth0 带有一个免费帐户的数据库。当您将登录注册小部件添加到您的应用程序并且用户注册时,它会将它们添加到您的 auth0 帐户中的数据库中。
可以看到进程信息here
我所做的是使用 auth0 小部件对用户进行身份验证。这允许 auth0 处理加密和安全性。然后,当用户登录时,我在响应中请求配置文件。通常,这至少可以为我提供基本信息,例如电子邮件地址。我使用电子邮件地址作为唯一键创建自己的数据库,这允许我在用户登录时向用户提供正确的数据。
这是我的 auth0 服务示例,它使用小部件并在响应中请求用户的个人资料,然后将其存储到本地存储中。
import { Injectable } from '@angular/core';
import { tokenNotExpired, JwtHelper } from 'angular2-jwt';
import { Router } from '@angular/router';
import { myConfig } from './auth.config';
declare var Auth0Lock: any;
var options = {
theme: {
logo: '/img/logo.png',
primaryColor: '#779476'
},
languageDictionary: {
emailInputPlaceholder: "email@example.com",
title: "Login or SignUp"
},
};
@Injectable()
export class Auth {
lock = new Auth0Lock(myConfig.clientID, myConfig.domain, options, {});
userProfile: Object;
constructor(private router: Router) {
this.userProfile = JSON.parse(localStorage.getItem('profile'));
this.lock.on('authenticated', (authResult: any) => {
localStorage.setItem('access_token', authResult.idToken);
this.lock.getProfile(authResult.idToken, (error: any, profile: any) => {
if (error) {
console.log(error);
return;
}
localStorage.setItem('profile', JSON.stringify(profile));
this.userProfile = profile;
this.router.navigateByUrl('/overview');
});
this.lock.hide();
});
}
public login() {
this.lock.show();
}
private get accessToken(): string {
return localStorage.getItem('access_token');
}
public authenticated(): boolean {
try {
var jwtHelper: JwtHelper = new JwtHelper();
var token = this.accessToken;
if (jwtHelper.isTokenExpired(token))
return false;
return true;
}
catch (err) {
return false;
}
}
public logout() {
localStorage.removeItem('profile');
localStorage.removeItem('access_token');
this.userProfile = undefined;
this.router.navigateByUrl('/home');
};
}