google登录案例和apple登录案例

google:

    <script src="https://accounts.google.com/gsi/client" defer></script>

            window.google.accounts.id.initialize({

              // 主要就是填写client_id

              client_id:

                'client_id',

              auto_select: false,

              callback: _this.handleCredentialResponse,//回调函数

            })

            // 设置按钮的样式等

            window.google.accounts.id.renderButton(

              document.getElementById('g_id_signin'),

              {

                theme: 'filled_blue',

                size: 'large',

                // width:'320',

                type: 'standard',

                text: 'signin_with',

              }

            )

apple：

 <!-- apple登录 -->

    <script

      type="text/javascript"

      src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"

      let url = `<%= process.env.VUE_APP_ADDRESS %>`;

      AppleID.auth.init({

        clientId: '七七七七.io.web.login',

        redirectURI: url,

        scope: 'name email', // 请求的用户权限

        usePopup: true,

        ux_mode: 'popup',

        response_type: 'code id_token', // 授权类型

        response_mode: 'form_post', // 响应模式

        state: 'anti-forgery-token', // 防伪标记

        useAppleAuthUI: true, // 是否使用 Apple 的原生 UI

      });

      var signInButton = document.getElementById('appleid-signin')

      signInButton.addEventListener('click',()=>{

        let _this = this

        // AppleID.auth.signIn();

        AppleID.auth

          .signIn()

          .then(async function(response) {

            // 处理登录响应

            let { code, id_token } = response.authorization

          })

          .catch(function(error) {

            // 处理错误

            console.log(error, '报错信息')

          })

      })