时间戳

首页 > 解决方案 > 为什么 Google 登录在 Angular 应用程序的 Angular Web 应用程序中不起作用？

angular - 为什么 Google 登录在 Angular 应用程序的 Angular Web 应用程序中不起作用？

问题描述

我正在尝试让谷歌登录我的网络应用程序。我尝试按照本教程进行谷歌登录但即使谷歌登录按钮也没有显示。我想在http://localhost:4200/home进行身份验证，而不是在http://localhost:4200

这是我的主页 HTML 的样子

<html>
<head>
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <meta name="google-signin-client_id" content="998210766859-ag7cijtb0md9cj6oj9nvqis5kk8g7929.apps.googleusercontent.com">
</head>
<body>


<br>
<a href="#" onclick="signOut();">Sign out</a>

<div class="g-signin2" data-onsuccess="onSignIn"></div>

<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>

</body> 
</html>

这是对应的component.ts

import { Component, OnInit } from '@angular/core';
import { BlogService } from '../blog.service';
import { Blogpost } from '../blogpost';

@Component({
  selector: 'app-frontpage',
  templateUrl: './frontpage.component.html',
  styleUrls: ['./frontpage.component.css']
})

export class FrontpageComponent implements OnInit {
  public lis = [];
  public l1 ="siba";
  constructor(private servo:BlogService) { }

  ngOnInit(): void {
    this.servo.getblogs()
    .subscribe(data => this.lis = data);
  }

  onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
    console.log('Name: ' + profile.getName());
    console.log('Image URL: ' + profile.getImageUrl());
    console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
  }

}

最后一部分是 onSignIn 函数。

但是当我运行该应用程序时，登录按钮没有出现，只需退出锚标记即可。

标签： angulartypescriptapigoogle-apigoogle-signin

解决方案

在这里试试这个包 angularx-social-login ，它很容易实现。

推荐阅读