如何启用“使用 Apple Id 登录"在离子 3 应用中 [英] How to enable "Sign in with Apple Id" in Ionic 3 application

问题描述

我有一个现有的 Ionic 3 应用程序，允许用户使用他们的 Facebook 或 Google 帐户登录.该应用程序与 ASP.NET Core 网站和 API 进行交互.我的理解是，在某些时候，Apple 将要求此类应用程序支持 使用 Apple 登录"

I have an existing Ionic 3 application that allows users to sign in with their Facebook or Google accounts. The app interacts with an ASP.NET Core website and api. My understanding is that at some point Apple will require such apps to support "Sign in with Apple"

对于 Facebook 和 Google，有cordova 插件(facebook4 和googleplus)，然后是一些服务器端代码来处理OAuth/OpenID Connect.我没有找到任何用于使用 Apple 登录"的cordova 插件.我找到了一篇关于如何实现的文章api/web 方面，但是我不太清楚 Ionic 方面.如何在基于 ionic 的 iOS 应用程序中启用使用 Apple 登录"?是否不需要插件(即都可以使用 javascript 或应用程序内浏览器完成)?我知道应用内浏览器被谷歌的身份验证页面阻止，似乎任何身份验证都更喜欢更本机"的方法.

With Facebook and Google, there are cordova plugins (facebook4 and googleplus), and then some server-side code to handle the OAuth/OpenID Connect. I am not finding any cordova plugins for "Sign in with Apple". I have found an article about how to implement the api/web side of this, however I'm less clear on the Ionic side. How do I to enable "Sign in with Apple" in the ionic based iOS app? Is a plugin not needed (ie it can all be done with javascript or in-app browser)? I know in-app-browser is blocked by Google's auth page and it seems like a more "native" approach is preferred for any auth.

我知道这是新的，但如果 Apple 开始要求它，似乎更多的开发者会遇到这个问题.我是否误解了即将要求执行此操作的某些内容?

I understand this is new, but it seems like more developers would have this issue if Apple is going to start requiring it. Am I misunderstanding something about this being required soon?

推荐答案

你可以使用这个 Ionic 包装器:https://www.npmjs.com/package/@ionic-native/sign-in-with-apple

You could use this Ionic wrapper : https://www.npmjs.com/package/@ionic-native/sign-in-with-apple

安装插件和包装器:

ionic cordova plugin add cordova-plugin-sign-in-with-apple
npm i --save @ionic-native/sign-in-with-apple

导入:

import { SignInWithApple, AppleSignInResponse, AppleSignInErrorResponse, ASAuthorizationAppleIDRequest } from '@ionic-native/sign-in-with-apple';

使用示例(使用 firebase):

An example of use (with firebase) :

  async loginWithApple(): Promise<void> {
    if (this.platform.is('cordova')) {
      try {
        const appleCredential: AppleSignInResponse = await SignInWithApple.signin({
          requestedScopes: [
            ASAuthorizationAppleIDRequest.ASAuthorizationScopeFullName,
            ASAuthorizationAppleIDRequest.ASAuthorizationScopeEmail
          ]
        });
        const credential = new firebase.auth.OAuthProvider('apple.com').credential(
          appleCredential.identityToken
        );
        this.afAuth.auth.signInWithCredential(credential)
          .then((res) => {
            console.log('Login successful', res);
          })
          .catch((error) => {
            console.log(error);
          });
      } catch (error) {
        console.log(error);
      }
    }
  }

这篇关于如何启用“使用 Apple Id 登录"在离子 3 应用中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！