如何知道我的 Web 应用程序的 APPLICATION_CLIENT_ID 和 YOUR_AUTH0_DOMAIN
how to know APPLICATION_CLIENT_ID and YOUR_AUTH0_DOMAIN of my web application
我已经按照本指南创建了一个 Web 应用程序 https://auth0.com/blog/creating-beautiful-apps-with-angular-material/。
在指南中,他们创建了 auth0.ts 文件。
在那里,他们提到设置我的 APPLICATION_CLIENT_ID 和 YOUR_AUTH0_DOMAIN。
我不知道从哪里得到这些 ID。
这是我的 auth.ts
文件的代码。
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as auth0 from 'auth0-js';
(window as any).global = window;
@Injectable()
export class AuthService {
auth0 = new auth0.WebAuth({
clientID: '<APPLICATION_CLIENT_ID>',
domain: '<YOUR_AUTH0_DOMAIN>',
responseType: 'token',
redirectUri: 'http://localhost:4200/',
scope: 'openid'
});
accessToken: String;
expiresAt: Number;
constructor(public router: Router) { }
public login(): void {
this.auth0.authorize();
}
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken) {
window.location.hash = '';
this.accessToken = authResult.accessToken;
this.expiresAt = (authResult.expiresIn * 1000) + new Date().getTime();
this.router.navigate(['/dashboard']);
} else if (err) {
this.router.navigate(['/']);
console.log(err);
}
});
}
public logout(): void {
this.accessToken = null;
this.expiresAt = null;
this.router.navigate(['/']);
}
public isAuthenticated(): boolean {
return new Date().getTime() < this.expiresAt;
}
}
听起来您注册了 Auth0 并创建了一个应用程序。
如果您转到 Application Dashboard,您会看到您的应用已列出。
点击应用名称,进入应用设置页面。右边的小图标可以让你复制你需要的信息。
如果您还没有注册,可以sign up免费。
登录后,您需要创建一个新应用程序,单击“+ 新应用程序”。从这里您可以按照内置指南在 Auth0.
中创建一个 单页应用程序
创建应用程序后,您可以将上述配置复制到 auth.ts
文件中。
如果您要从我的屏幕截图中复制设置,您的 auth.ts
文件将如下所示:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as auth0 from 'auth0-js';
(window as any).global = window;
@Injectable()
export class AuthService {
auth0 = new auth0.WebAuth({
clientID: 'c45ij324tg345bjnfojo2u6b4352',
domain: 'your-auth0-domain.auth0.com',
responseType: 'token',
redirectUri: 'http://localhost:4200/',
scope: 'openid'
});
accessToken: String;
expiresAt: Number;
constructor(public router: Router) { }
public login(): void {
this.auth0.authorize();
}
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken) {
window.location.hash = '';
this.accessToken = authResult.accessToken;
this.expiresAt = (authResult.expiresIn * 1000) + new Date().getTime();
this.router.navigate(['/dashboard']);
} else if (err) {
this.router.navigate(['/']);
console.log(err);
}
});
}
public logout(): void {
this.accessToken = null;
this.expiresAt = null;
this.router.navigate(['/']);
}
public isAuthenticated(): boolean {
return new Date().getTime() < this.expiresAt;
}
}
披露:我为 Auth0 工作。
我已经按照本指南创建了一个 Web 应用程序 https://auth0.com/blog/creating-beautiful-apps-with-angular-material/。
在指南中,他们创建了 auth0.ts 文件。
在那里,他们提到设置我的 APPLICATION_CLIENT_ID 和 YOUR_AUTH0_DOMAIN。
我不知道从哪里得到这些 ID。
这是我的 auth.ts
文件的代码。
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as auth0 from 'auth0-js';
(window as any).global = window;
@Injectable()
export class AuthService {
auth0 = new auth0.WebAuth({
clientID: '<APPLICATION_CLIENT_ID>',
domain: '<YOUR_AUTH0_DOMAIN>',
responseType: 'token',
redirectUri: 'http://localhost:4200/',
scope: 'openid'
});
accessToken: String;
expiresAt: Number;
constructor(public router: Router) { }
public login(): void {
this.auth0.authorize();
}
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken) {
window.location.hash = '';
this.accessToken = authResult.accessToken;
this.expiresAt = (authResult.expiresIn * 1000) + new Date().getTime();
this.router.navigate(['/dashboard']);
} else if (err) {
this.router.navigate(['/']);
console.log(err);
}
});
}
public logout(): void {
this.accessToken = null;
this.expiresAt = null;
this.router.navigate(['/']);
}
public isAuthenticated(): boolean {
return new Date().getTime() < this.expiresAt;
}
}
听起来您注册了 Auth0 并创建了一个应用程序。
如果您转到 Application Dashboard,您会看到您的应用已列出。
点击应用名称,进入应用设置页面。右边的小图标可以让你复制你需要的信息。
如果您还没有注册,可以sign up免费。
登录后,您需要创建一个新应用程序,单击“+ 新应用程序”。从这里您可以按照内置指南在 Auth0.
中创建一个 单页应用程序创建应用程序后,您可以将上述配置复制到 auth.ts
文件中。
如果您要从我的屏幕截图中复制设置,您的 auth.ts
文件将如下所示:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as auth0 from 'auth0-js';
(window as any).global = window;
@Injectable()
export class AuthService {
auth0 = new auth0.WebAuth({
clientID: 'c45ij324tg345bjnfojo2u6b4352',
domain: 'your-auth0-domain.auth0.com',
responseType: 'token',
redirectUri: 'http://localhost:4200/',
scope: 'openid'
});
accessToken: String;
expiresAt: Number;
constructor(public router: Router) { }
public login(): void {
this.auth0.authorize();
}
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken) {
window.location.hash = '';
this.accessToken = authResult.accessToken;
this.expiresAt = (authResult.expiresIn * 1000) + new Date().getTime();
this.router.navigate(['/dashboard']);
} else if (err) {
this.router.navigate(['/']);
console.log(err);
}
});
}
public logout(): void {
this.accessToken = null;
this.expiresAt = null;
this.router.navigate(['/']);
}
public isAuthenticated(): boolean {
return new Date().getTime() < this.expiresAt;
}
}
披露:我为 Auth0 工作。