Merge pull request #213 from Authing/feat-v5-upgrade-ui-components-4.3.14

Feat v5 upgrade UI components 4.3.14

Author: zhaoyiming0803

examples/guard-angular/normal/package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "dev": "ng serve --port 3000",
+    "dev": "ng serve --port 3003",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
@@ -19,7 +19,7 @@
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
-    "@authing/guard-angular": "^5.1.6-alpha.2",
+    "@authing/guard-angular": "^5.1.9-alpha.2",
     "face-api.js": "^0.22.2",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

examples/guard-angular/normal/package.json

@@ -15,14 +15,14 @@ import * as facePlugin from 'face-api.js'
     BrowserModule,
     AppRoutingModule,
     GuardModule.forRoot({
-      appId: 'AUTHING_APP_ID',
+      appId: '6319f41de72e9e18a1bafba6',
 
       // 如果你使用的是私有化部署的 Authing 服务，需要传入自定义 host，如:
       // host: 'https://my-authing-app.example.com',
 
       // 默认情况下，会使用你在 Authing 控制台中配置的第一个回调地址为此次认证使用的回调地址。
       // 如果你配置了多个回调地址，也可以手动指定（此地址也需要加入到应用的「登录回调 URL」中）：
-      redirectUri: "YOUR_REDIRECT_URI",
+      redirectUri: "https://aaaaaa1bbv.authing.cn",
 
       isSSO: true,
       config: {

examples/guard-angular/normal/src/app/app.module.ts

@@ -19,5 +19,7 @@
 
   <button class="authing-button" (click)="refreshToken()">Refresh Token</button>
 
+  <button class="authing-button" (click)="getAccessTokenByIdToken()">Get Access Token By Id Token</button>
+
   <div id="authing-guard-container"></div>
 </div>

examples/guard-angular/normal/src/app/pages/embed/embed.component.html

@@ -15,12 +15,15 @@ export class EmbedComponent {
 
   langCache = ''
 
+  userInfo: null | User = null
+
   ngOnInit() {
     console.log('guard instance: ', this.guard.client)
 
     // 使用 start 方法挂载 Guard 组件到你指定的 DOM 节点，登录成功后返回 userInfo
     this.guard.client.start('#authing-guard-container').then((userInfo: User) => {
       console.log(userInfo)
+      this.userInfo = userInfo
     })
 
     this.guard.client.on('load', (authClient: AuthenticationClient) => {
@@ -33,6 +36,7 @@ export class EmbedComponent {
 
     this.guard.client.on('login', (userInfo: User) => {
       console.log('userInfo in login: ', userInfo)
+      this.userInfo = userInfo
     })
   }
 
@@ -72,4 +76,13 @@ export class EmbedComponent {
     this.langCache = event?.target?.value
     this.guard.client.changeLang(event?.target?.value)
   }
+
+  async getAccessTokenByIdToken () {
+    const authenticationClient: AuthenticationClient = await this.guard.client.getAuthClient()
+    const res = await authenticationClient.getAccessTokenByIdToken({
+      redirectUri: 'https://www.baidu.com',
+      idToken: this.userInfo!.token as string
+    })
+    console.log('getAccessTokenByIdToken: ', res)
+  }
 }