Javascript 角度5谷歌登录组件_Javascript_Angular_Typescript_Google Signin_Googlesigninapi

Javascript 角度5谷歌登录组件

javascript angular typescript

Javascript 角度5谷歌登录组件,javascript,angular,typescript,google-signin,googlesigninapi,Javascript,Angular,Typescript,Google Signin,Googlesigninapi,我已经在html页面中使用API密钥实现了客户端Google Signin。当我在index.html中插入所有必要的标记和函数时，它工作得非常好，但是当我在组件中插入GoogleSignin按钮时，它甚至没有显示出来因此，如果这是它在简单html页面中的工作方式： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Google Signin o

我已经在html页面中使用API密钥实现了客户端Google Signin。当我在index.html中插入所有必要的标记和函数时，它工作得非常好，但是当我在组件中插入GoogleSignin按钮时，它甚至没有显示出来

因此，如果这是它在简单html页面中的工作方式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Signin out Demo</title>
<script src="https://apis.google.com/js/platform.js" async defer> 
</script>
<meta name="google-signin-client_id" content="myprivateid.apps.googleusercontent.com">
</head>
<body>


<div class="g-signin2" data-onsuccess="onSignIn"></div><br />
<a href="#" onclick="signOut();">Sign out</a>

<script>
  function 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.
    console.log(profile);
  }

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

</body>
</html>


谷歌登录演示


函数onSignIn（谷歌用户）{
var profile=googleUser.getBasicProfile（）；
console.log（'ID:'+profile.getId（））；//不要发送到后端！改用ID令牌。
log（'Name:'+profile.getName（））；
log（'Image URL:'+profile.getImageUrl（））；
console.log（'Email:'+profile.getEmail（））；//如果“Email”作用域不存在，则此值为null。
控制台日志（概要文件）；
}
函数签出（）{
var auth2=gapi.auth2.getAuthInstance（）；
auth2.signOut（）.then（函数（）{
log（'User signed out'）；
});
}

如果我想插入一个角度组件，并尽可能地保留类似的内容，我会将meta标记和google脚本保留在index.html中，然后在组件中插入按钮。它甚至没有显示。我做错了什么

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

除了我必须添加的小javascript代码外，按钮甚至没有显示。

我如何在不安装其他npm组件的情况下修复它？

你有没有想过这个问题？在我的例子中，似乎没有调用函数onSignIn（）回调函数。@sbattou修复了这个问题me@C.M.谢谢你回复我，但我决定不实施Google+，因为它很快就要关闭了。我听说G+正在关闭，但我认为这是任何Google帐户登录web应用的JavaScript，不仅仅是谷歌+。

<div class="g-signin2" data-onsuccess="onSignIn"></div><br />
<a href="#" onclick="signOut();">Sign out</a>