Angular Auth0:Api调用返回HTML。内部HTML追加似乎失败了(UI不会显示的UI)

问题描述 投票:0回答:1

因此,针对角度的auth0 SDK是一个噩梦,因此,如果您不喜欢Auth0文档中的示例,我希望看到它。

我调用auth0的身份验证API

innerhtml;
const loginstring = 'https://<removed>.auth0.com/authorize?' +
      'response_type=code&' +
      'client_id=<removed>&' +
      'connection=null&' +
      'redirect_uri=http://localhost:4200/';
    this.http.get(loginstring, {responseType: 'text', observe:'response'}).subscribe(
      (req:any)=>{
        console.log('this is the http response');
        console.log(req.body);
        this.innerhtml = req.body;
        this.senddata(this.innerhtml, 'html');
        console.log('data sent');

从auth0返回的html如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Portal</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="scripts.js" defer></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

现在,这看起来很像我的角度应用程序中的index.html,这很令人困惑。我以为html应该是auth0注册/登录UI的]

然后将返回的html发送到使用它的组件。

ngOnInit() {
    // req is payload of array 0 = data 1 = flag
    this.authservicedatasubscription = this.authservice.receivedata().subscribe(
      (req: any)=>{
        if(req != null){
          console.log('data recevied checking');
          if(req[1] == 'html'){
            console.log('if statement passed');
            this.innerhtml = this.sanitizer.bypassSecurityTrustHtml(req[0]);
            console.log('here is the inner html');
            console.log(this.innerhtml);
          }
        }


      }
    );

  }

html看起来像这样:

<div *ngIf="innerhtml != null" class="container">
  blah
  <div [innerHTML]="innerhtml" id="htmlholder" class="row">

  </div>
</div>

blah现在对我来说只是一个视觉标记,以查看该功能是否正常。

更新:

此页面提供了一些清晰度“

https://auth0.com/docs/universal-login/default-login-url

angular authentication authorization innerhtml auth0
1个回答
0
投票

所以看起来一切正常。

只是应该将授权api设置为我的应用程序的一部分,该应用程序会将用户重定向到auth0登录。

为此,我的应用程序必须在互联网上,我还没有准备好这样做。所以现在一切都清楚了。

重新检查后在文档中找到了所有这些信息。

https://auth0.com/docs/universal-login/default-login-url

拥抱和亲吻

© www.soinside.com 2019 - 2024. All rights reserved.