El equipo de desarrollo de aplicaciones móviles de digitalDot no para de trabajar y además, como sabéis, sacan tiempo para redactar pequeños tutoriales con los que enseñaros algunos trucos en el desarrollo de apps.
En esta ocasión os vamos a mostrar cómo integrar Facebook y Google en iOS (Swift 4.2), para que los usuarios de la app puedan loguearse o iniciar sesión desde una de estas dos plataformas.
No es porque lo digamos nosotros, pero es muy sencillo. Seguid leyendo y os daréis cuenta.
Contenido
Una forma de instalar Facebook en Xcode es mediante el archivo podfile. En dicho archivo se añaden las siguientes líneas:
| pod 'FBSDKCoreKit', '4.38.0' pod 'FBSDKLoginKit', '4.38.0' pod 'FBSDKShareKit', '4.38.0' |
En el terminal se abre la carpeta del proyecto donde se encuentre ese archivo y se ejecuta el comando:
pod update
Una vez instalado Facebook, se debe obtener el identificador de la aplicación. ¿Cómo lo conseguimos?, en el siguiente enlace oficial de Facebook for Developers.
Para ello, se crea una nueva aplicación y se nos ofrecerá un identificador.
¡¡Ojo!!: el estado debe mostrarse como ‘Publicada’ y debe aparecer el producto ‘Inicio de sesión con Facebook’.
Por otro lado, se deben añadir las siguientes líneas al archivo Info.plist.
| <array>
<dict> <key>CFBundleURLSchemes</key> <array> <string>fb{id}</string> </array> </dict> </array> <key>FacebookAppID</key> <string>{id}</string> <key>FacebookDisplayName</key> <string>nombre-app</string> <key>LSApplicationQueriesSchemes</key> <array> <string>fbapi</string> <string>fbauth2</string> <string>fb-messenger-api</string> <string>fbshareextension</string> <string>comgooglemaps</string> </array> |
Debéis comprobar que el nombre de la app sea el mismo que hemos puesto al crear la aplicación en Facebook for Developers.
El último paso es añadir en AppDeelegate la función:
| func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
FBSDKApplicationDelegate.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions) return true } |
¡¡Ojo!!: no olvidéis importar FBSDKCoreKit.
En la pantalla que queramos poner el login de Facebook se propone incluir lo siguiente para obtener datos del cliente:
| let fbManager = FBSDKLoginManager()
fbManager.logIn(withReadPermissions: ["public_profile", "email"], from: self) { (result, error) in if let loginResult = result, error == nil { if let permissions = loginResult.grantedPermissions { if permissions.contains("email") { let graphRequest:FBSDKGraphRequest = FBSDKGraphRequest(graphPath: "me", parameters: ["fields":"first_name, last_name,email"]) graphRequest.start(completionHandler: { (connection, result, error) -> Void in if error == nil{ let data:[String:AnyObject] = result as! [String : AnyObject] Utilidades.emailFacebook = data["email"] as! String var first_name = data["first_name"] as! String var last_name = data["last_name"] as! String
} }) } } } } |
No os olvidéis de importar FBSDKCoreKit y FBSDKLoginKit.
Ya habéis conseguido que los usuarios de vuestra app accedan a ella a través de su cuenta de Facebook, ahora, vamos a hacer lo mismo para aquellos que no sean tan seguidores de Mark Zuckerberg y prefieran entrar con su cuenta de Google.
En primer lugar, instalamos GoogleSignIn mediante el archivo podfile en el que se pone la siguiente línea.
pod 'GoogleSignIn'
Desde el terminal, en la carpeta del proyecto, se ejecuta el siguiente comando:
pod update
En segundo lugar, tenemos que obtener el identificador de Google. Para ello, accederemos a la web oficial de Developers Google.
Y hacemos clic en ‘CONFIGURE A PROJECT’
A continuación, se crea el proyecto, se añade un nombre, el tipo de aplicación (en nuestro caso iOS), el bundle ID (en la información del proyecto en Xcode aparece) y te devolverá el ID que será algo parecido al siguiente formato:
“YOUR_CLIENT_ID.apps.googleusercontent.com"
Ahora deberemos añadir el identificador obtenido en Xcode. ¿Cómo lo hacemos?, pues en Xcode se accede a:
Project > Target > Info > URL Types, y se añade el identificador obtenido, pero en orden INVERSO, en la sección ‘URL Schemes’.
Quedaría algo así:
“com.googleusercontent.apps.YOUR_CLIENT_ID"
Seguidamente modificaremos AppDeelegate.swift añadiendo en la cabecera de AppDelegate: GIDSignInDelegate y la función:
| class AppDelegate: UIResponder, UIApplicationDelegate, GIDSignInDelegate{
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool { return GIDSignIn.sharedInstance().handle(url as URL, sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String, annotation: options[UIApplication.OpenURLOptionsKey.annotation]) } |
No os olvidéis importar GoogleSignIn.
Por último, modificaremos ViewController.swift, añadiendo, en la cabecera, las siguientes clases:
| class LoginViewController: UIViewController, GIDSignInDelegate, GIDSignInUIDelegate{ |
En la función viewDidLoad() se añade la siguiente funcionalidad:
| GIDSignIn.sharedInstance().uiDelegate = self
GIDSignIn.sharedInstance().clientID = "YOUR_CLIENT_ID.apps.googleusercontent.com" GIDSignIn.sharedInstance().delegate = self |
Para añadir el inicio de sesión se llama a la siguiente función:
| GIDSignIn.sharedInstance().signIn() |
Si el usuario se ha registrado correctamente, en esta función, obtendremos sus datos como se muestra en el ejemplo:
| func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!, withError error: Error!) {
//if any error stop and print the error if error != nil{ print(error ?? "google error") return } let fullName = user.profile.name let email = user.profile.email } |
Y hasta aquí el tutorial de hoy. Si queréis seguir aprendiendo a desarrollar aplicaciones móviles no dejéis de seguirnos, prometemos ser más amenos la próxima vez. ?
Si tenéis alguna duda o lo que necesitáis es crear una app para vuestro negocio, podéis contactar con el equipo de digitalDot y contarle vuestras ideas.
Horario de atención al cliente:
L-V 8.00-14.00
L-J 14.00-18.00
