问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用 HTML 显示 Google 登录按钮

社区维基
1
新手上路，请多包涵
 <html>
       <head>
          <meta name="google-signin-scope" content="profile email">
          <meta name="google-signin-client_id" content="MY_CLIENT_ID_ON_GOOGLE_DEV.apps.googleusercontent.com">
          <!-- To integrate Google Sign-in -->
          <script src="https://apis.google.com/js/api.js"></script>
          <script src="https://apis.google.com/js/platform.js" async defer></script>
       </head>
       <body>
          <div class="g-signin2" data-onsuccess="onSignIn"></div>
       </body>
    </html>

它不显示。这个 HTML 片段有什么问题？我是否必须执行其他操作才能显示 Google 登录按钮？

原文由 Daniele Cappuccio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmloauthgoogle-apigoogle-signin
阅读 742
2 个回答
得票最新
社区维基
1
✓ 已被采纳

这是我使用 materializecss 想出的一个优雅的解决方案。

谷歌登录按钮

代码

<div class="col s12 m6 offset-m3 center-align">
    <a class="oauth-container btn darken-4 white black-text" href="/users/google-oauth/" style="text-transform:none">
        <div class="left">
            <img width="20px" style="margin-top:7px; margin-right:8px" alt="Google sign-in"
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
        </div>
        Login with Google
    </a>
</div>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

原文由 Daniele Cappuccio 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

如果你使用 Bootstrap v4 ，你可以得到一个漂亮的按钮，如下图所示： 在此处输入图像描述

 <div class="row">
  <div class="col-md-3">
    <a class="btn btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none">
      <img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
      Login with Google
    </a>
  </div>
</div>

<!-- Minified CSS and JS -->
<link   rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
</script>

原文由 Daniele Cappuccio 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 2 个回答
推荐问题