Ionic 3-Sign in with apple
Apple el 30 de junio del 2020 actualizo su App Store Review Guideline en la cual obliga a incluir el Registro con apple siempre y cuando se brinde otro servicio de registro de terceros para registro o iniciar sesión como los son
- Google Sign
Pero podemos refutar en algunos casos para que nuestra aplicación sea aceptada.
No es necesario incluir el iniciar sesión con Apple si:
- Su aplicación utiliza exclusivamente la configuración de cuenta y los sistemas de inicio de sesión de su empresa.
- Su aplicación es una aplicación educativa, empresarial o empresarial que requiere que el usuario inicie sesión con una cuenta educativa o empresarial existente.
- Su aplicación utiliza un sistema de identificación de ciudadanos respaldado por el gobierno o la industria o una identificación electrónica para autenticar a los usuarios.
- Su aplicación es un cliente para un servicio de terceros específico y los usuarios deben iniciar sesión en su correo, redes sociales u otra cuenta de terceros directamente para acceder a su contenido.
Ahora sí la parte del código. Desde la version 4 de ionic framework se incluye un plugin de sign in with apple
pero esto no nos ayudará mucho porque no existe un soporte del plugin para la version de ionic 3. Así que no podremos utilizar completamente lo que nos brinda el plugin nativo.
Una solución alterna es solo instalar .
ionic cordova plugin add cordova-plugin-sign-in-with-apple
Get Kevin Rosado’s stories in your inbox
Join Medium for free to get updates from this writer.
Primero este plugin solo funciona con versiones de iOS >=13. por ende recomiendo agregar esta linea a nuestra archivo.ts donde estemos realizando el login.
//importamos device
import { Device } from '@ionic-native/device';//declaremos esta propiedad que nos aydurá a ocultar el registro con apple cuando sea necedario.
showSingApple: boolean = false;//dentro del constructor agregamos lo siguiente:if(this.device.platform == 'iOS' && Number(this.device.version) >= 13 ){this.showSingApple = true;}
Segundo el html.
//mediante la función click llamamos al método que realizará nuestro login.
<button *ngIf="showSingApple" class="apple" ion-button icon-left full (click)="SignWithApple()"><ion-icon name="logo-apple"></ion-icon>Iniciar Sesión con apple</button>
Ahora en nuestro archivo.ts primero declaramos la variable cordova antes del ionicPage.
declare var cordova: any;Creamos nuestro método e invocamos de la siguiente manera el SignInWithApple y obtendremos las respuestas del callback a diferencia que en la version de ionic 4 el plugin trabaja con promesas en ionic-native/sign-in-with-apple.
SignWithApple(){cordova.plugins.SignInWithApple.signin({requestedScopes: [0, 1]},(succ) => {//get email and full name from Apple IDconsole.log(succ)let userData = { name: succ.fullName.givenName + ' ' + succ.fullName.familyName, first_name: succ.fullName.givenName , last_name:succ.fullName.familyName, email: succ.email, id: succ.user
};//una vez obtenido los datos de apple aquí deberás realizar tu lógica de negocio para cual vas a utilizar los datos.this.isLoggedIn = true;},(err) => { console.error(err) this.isLoggedIn = false;})}
Los requestedScopes: [0, 1] nos retornaran la posiciones del nombre completo y el email utilizados en el callback.
requestedScopes is an array of requested scopes.0:FullName1:Email
Esta prueba la podemos hacer en el emulador de iphone 11, para eso debemos ir a los settings y configurar nuestro appleid.
Al presionar en continuar debemos seleccionar la información a compartir como el correo.
Antes de realizar un login exitoso debemos agregar SIGN IN WITH APPLE en nuestra cuanta de developer enhttps://developer.apple.com y actualizaremos nuestro App ID.
una vez hecho esto nuestro Profile habra expirado por ende lo volvemos a descargar ya instalar en nuestro proyecto en xcode y comprobamos que aparezca en Signing y Capabilities
Referencias
App Store Review Guideline : https://developer.apple.com/app-store/review/guidelines/#sign-in-with-apple
Ionic Framework — Sign in with apple : https://ionicframework.com/docs/native/sign-in-with-apple
Ver más del plugin en npm
https://www.npmjs.com/package/cordova-plugin-sign-in-with-apple
Escribe a : keriroso@gmail.com
