CYM-Identity tries to follow oAuth and OpenID Connect specifications and therefore is unopinionated when it comes to libraries.
In order to get you started with your Angular Project, we recommend that you use
angular-oauth2-oidcThis guide only applies to Angular Applications which do not have a dedicated backend. If you do have a dedicated backend, you must use the
Web App guide instead.
If you haven't done it yet, you need to create an Application following the
documentationWe strongly recommend that you only use the authorization_code grant.
By design, an Angular Application will consume APIs hosted by a Resource Server.
Follow the instructions in the
documentation to create your Resource Server and Protected Resources.
1import { AuthConfig } from 'angular-oauth2-oidc';
2export const authCodeFlowConfig: AuthConfig = {
3 issuer: `https://${realm.url}/oauth/${realm.name}`,
4 redirectUri: 'YOUR_REDIRECT_URI',
5 clientId: 'YOUR_CLIENT_ID',
6 responseType: 'code',
7 scope: 'openid offline_access profile email address custom_scope',
8 strictDiscoveryDocumentValidation : false,
9 sessionChecksEnabled: false
10};
11
Now that everything is set up, you can start authenticating your users.
When your users are ready to authenticate, you can trigger an authentication request.
1const someState = {'hello' : 'world'};
2
3this.oauthService.configure(authCodeFlowConfig);
4await this.oauthService.loadDiscoveryDocument();
5sessionStorage.setItem('flow', 'code');
6
7this.oauthService.initLoginFlow(someState);
After a successfull authentication, the user will be redirected to your application.
Each logged in user (employee, customer, partner, ...) needs to hold a CYM-Identity License. Add it as part of mass assignment or through your registration flow.
Add the following code in your redirect_uri page
1this.oauthService.configure(authCodeFlowConfig);
2this.oauthService.loadDiscoveryDocumentAndTryLogin().then(_ => {
3
4})
5.catch(err => {
6
7});
You can now use the access_token to consume APIs.
1const data = await fetch('https://resource.server/resource', {
2 method: 'GET',
3 headers : {
4 'authorization' : 'Bearer ' + this.oauthService.getAccessToken()
5 }
6}).then(resp => resp.json());
The access_tokens generated initially have a short lifetime, and you'll need new ones to keep accessing APIs on behalf of the user. Once an access_token has expired, you'll get a 401 response from an API.
1this.oauthService.customQueryParams = {audience : 'RESOURCE_SERVER_CLIENT_ID'}
2this.oauthService
3 .refreshToken().then(_ => {
4
5 })
6 .catch(err => {
7
8 });
When you made the previous request, you chose a specific ResourceServer to which you needed access. If you need an access_token scoped to a different Resource Or ResourceServer, you can request for it
1this.oauthService.customQueryParams = {audience : 'SAME_OR_DIFFERENT_RESOURCE_SERVER_CLIENT_ID'}
2this.oauthService
3 .refreshToken().then(_ => {
4
5 })
6 .catch(err => {
7
8 });
1this.oauthService.customQueryParams = {resource: 'https://resource.url'}
2this.oauthService
3 .refreshToken().then(_ => {
4
5 })
6 .catch(err => {
7
8 });
When your users are ready to logout, you can request a logout as follows.
1this.oauthService.revokeTokenAndLogout();