- Documents
Getting Started TokenService Get Token common problem Store Token Send Token Routing guard
Token's acquisition is divided into two categories, one is its own user authentication center, and the other is social login (essentially, it needs to go to its own user authentication center).
Generally speaking, the backend will provide a URL authentication address. We can send the user name and password entered by the user to the user authentication center just like a normal HTTP request. Finally, we will return a user information containing the Token. Therefore, you only need to use this Token Information Store.
A complete social login takes about two steps:
Open a third-party authorization box
Get the authentication information after the callback and Token Information Store
SocialService
provides a open()
method to open a login box. By default it is not registered in any module, because @delon/auth
thinks that such a service is usually only generated during the login process, so there is no need to inject it globally; only need to use the SocialService
component Inject it, of course you have to be willing to inject it in the root module.
@Component({
providers: [ SocialService ]
})
export class ProUserLoginComponent {
constructor(private socialService: SocialService) {}
}
Finally, use the type
attribute to specify what form to open an authorization box:
this.socialService.login(`//github.com/login/oauth/authorize?xxxxxx`, '/', { type: 'href' });
// Or use window.open to open the authorization window and subscribe to the results
this.socialService.login(`//github.com/login/oauth/authorize?xxxxxx`, '/', {
type: 'window'
}).subscribe(res => {
});
The callback page refers to the authentication information that is carried after the authorization is successful. In the past, you may write the authentication information directly to the cookie on the backend, and it will automatically write to the browser after the request ends. For the single page such as Angular, especially the front and rear ends. This approach becomes unachievable when deployed separately.
So @delon/auth
is to take the information from the callback page URL address as the source of the acquisition, of course it will be limited by the URL itself (eg length); but I want to be a long enough Token value, you can get Token, then get user information.
You need to create a page for the callback, and the only thing the page has to do is call the callback()
method on ngOnInit
(for example: callback.component.ts):
// 1, default based on the current URL address
this.socialService.callback();
// 2, without `{ useHash: true }` routing
this.socialService.callback(`/callback?token=40SOJV-L8oOwwUIs&name=cipchk&uid=1`);
// 3, with `{ useHash: true }` route
this.socialService.callback(`/?token=40SOJV-L8oOwwUIs&name=cipchk&uid=1#/callback`);
// 4, specify the `ITokenModel` object
this.socialService.callback({
token: '123456789',
name: 'cipchk',
id: 10000,
time: +new Date
});
callback()
will automatically convert the URL to the effect of ITokenModel
.
Note: The route for
{ useHash: true }
does not support callbacks in many third-party authorization boxes. If it is your own account system, you can still use the URL form in the third example.