文章/答案/技术大牛

发布

社区首页 >问答首页 >谷歌登录按钮未出现在Angular中

问谷歌登录按钮未出现在Angular中
EN

Stack Overflow用户

提问于 2021-02-18 20:58:23

回答 1查看 48关注 0票数 0

我试图在我的angular应用程序中添加谷歌登录按钮，但它没有出现。它的高度总是为0，如果我改变它--不会出现buton。我该怎么处理呢？我以为这可能是风格问题，但我错了。我试图在SO中找到答案，但没有找到任何合适的解决方案。我刚来Angular，我需要一些帮助。

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="google-signin-client_id" content="MY_ID">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

我的login.component.ts是这样的：

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

    constructor() { }

    onSignIn(googleUser: any) {
        console.log(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.
    }

    ngOnInit(): void {
    }

}

和login.component.html

<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center">

    <mat-card class="box">
        <mat-card-header>
            <mat-card-title>Sign in</mat-card-title>
        </mat-card-header>

        <form class="login-form">
            <mat-card-content>
                <mat-form-field class="login-form_full-width">
                    <input matInput placeholder="Username">
                </mat-form-field>

                <mat-form-field class="login-form_full-width">
                    <input matInput placeholder="Password">
                </mat-form-field>
            </mat-card-content>
            <button mat-stroked-button color="accent" class="btn-block">Log in</button>
        </form>
        <div class="g-singin2" data-onsuccess="onSignIn" data-theme="dark"></div>
    </mat-card>

</div>

我做错了什么？

html

angular

javascript

回答 1

Stack Overflow用户

发布于 2021-02-18 21:24:48

我猜您没有初始化gapi模块，如下所示：

gapi.load('auth2', function(){
    gapi.auth2.init();
});

如果您仍然面临问题，请考虑使用为angular：https://www.npmjs.com/package/angularx-social-login制作npm模块。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66260472

复制

相似问题

问谷歌登录按钮未出现在Angular中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌登录按钮未出现在Angular中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌登录按钮未出现在Angular中
EN