Token 的获取分为两大类,一是自己的用户认证中心,二是社会化登录(本质上还是需要走自己的用户认证中心)。
用户认证中心
一般来说后端会提供一个URL认证地址,我们可以像平常访问一个普通 HTTP 请求一样,将用户输入的用户名和密码等信息发送给用户认证中心,最后会返回一个用户信息包含 Token。因此,对于只需要将这此
Token信息存储
起来即可。
社会化登录
一个完整的社会化登录大概需要两个步骤:
打开
SocialService
提供了
open()
方法,用于打开一个登录框。默认情况下它本身并不在注册到任何模块当中,因为
@delon/auth
认为需要这类服务通常只会在登录过程中产生,因此没有必要在全局注入;只需要在使用
SocialService
对应组件中注入即可,当然你要愿意也可以在根模块中注入。
@Component({
providers: [ SocialService ]
export class ProUserLoginComponent {
constructor(private socialService: SocialService) {}
}
最后,利用
type
属性指定以采用什么形式打开一个授权框:
this.socialService.login(`//github.com/login/oauth/authorize?xxxxxx`, '/', { type: 'href' });
// 或使用 window.open 打开授权框并订阅结果
this.socialService.login(`//github.com/login/oauth/authorize?xxxxxx`, '/', {
type: 'window'
}).subscribe(res => {
});
回调
回调页面是指授权成功后携带的认证信息;以往你可能直接在后端将认证信息写入 Cookie 会自动在请求结束后写入浏览器,而对于 Angular 这类单页而言,特别是前后端分离部署时,这种方式变成无法实现。
因此
@delon/auth
是从回调页 URL 地址上携带信息作为获取源,当然它会受 URL 本身受限(例如:长度);但我想对一个 Token 值是足够长的,你可以获取到 Token,再获取用户信息。
需要创建一个用于回调的页面,而页面唯一要做的就是在
ngOnInit
时调用
callback()
方法(例如:
callback.component.ts
):
// 1、默认根据当前URL地址
this.socialService.callback();
// 2、非 `{ useHash: true }` 路由
this.socialService.callback(`/callback?token=40SOJV-L8oOwwUIs&name=cipchk&uid=1`);
// 3、带有 `{ useHash: true }` 路由
this.socialService.callback(`/?token=40SOJV-L8oOwwUIs&name=cipchk&uid=1#/callback`);
// 4、指定 `ITokenModel` 对象