El uso de las API de OAuth proporcionadas por aplicaciones de terceros, como Google+, para iniciar sesión en tu aplicación móvil puede ofrecer a los usuarios una primera experiencia agradable. Pueden iniciar sesión con una cuenta que ya conocen y en la que confían y rellenar su perfil con los datos que introdujeron en Google+. En este tutorial, usted aprenderá cómo:
- Escribe una aplicación Node.js para gestionar la autenticación con Sync Gateway.
- Utiliza la API REST de Couchbase Sync Gateway Admin para crear usuarios y sesiones.
- Integrar Google Sign-In en una aplicación iOS escrita con Swift 2.
- Cree una aplicación iOS sencilla en Swift para probar el nuevo punto final de inicio de sesión y replicar algunos documentos.
El proyecto final puede consultarse en GitHub.
Requisitos previos
Los requisitos previos para este tutorial son:
- Node.js
- Xcode 7+ (utilizarás Swift 2 para crear la aplicación de ejemplo)
Primeros pasos
Descargue Sync Gateway desde el siguiente enlace y descomprima el archivo:
http://www.couchbase.com/nosql-databases/downloads
En un nuevo archivo llamado sync-gateway-config.jsonpegue lo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "log": ["*"], "bases de datos": { "simple-login": { "servidor": "morsa:", "usuarios": { "INVITADO": { "desactivado": verdadero } }, "sync": ` función(doc, oldDoc) { canal(doc._id); acceda a(doc.usuario_id, doc._id); } ` } } } |
En este archivo de configuración, está creando una base de datos llamada simple-login y utilizando la función de sincronización para asignar cada documento a un canal diferente y conceder a un usuario acceso al canal (el nombre de usuario se almacena en el archivo usuario_id
del documento).
Inicie Sync Gateway con el siguiente comando:
1 |
$ ~/Descargas/couchbase-sincronizar-pasarela/papelera/sync_gateway sincronizar-pasarela-config.json |
Proxy inverso para Sync Gateway
Con Sync Gateway en funcionamiento, podrá centrarse en crear el servidor de aplicaciones para gestionar la autenticación entre Google y Sync Gateway.
Utilizará el popular Express para gestionar la solicitud de creación de un usuario y el módulo solicitar para dirigir el resto del tráfico a Sync Gateway.
Instala los siguientes módulos de Node.js:
1 |
$ npm instale express cuerpo-analizador solicitar --guardar |
Cree un nuevo archivo llamado servidor.js y añade lo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 1 var express = requiere(exprés) , bodyParser = requiere('body-parser') , solicitar = solicitar(solicitud).valores predeterminados({json: verdadero}); // 2 var aplicación = express(); aplicación.utilice(/google_signin, bodyParser.json()); aplicación.Correo electrónico:(/google_signin, función (consulte, res) { // TODO: gestionar la solicitud de inicio de sesión }); // 3 aplicación.todos('*', función (consulte, res) { var url = 'http://0.0.0.0:4984' + consulte.url; consulte.tubo(solicitar(url)).tubo(res); }); // 4 var servidor = aplicación.escuche(8000, función () { var host = servidor.dirección().dirección; var puerto = servidor.dirección().puerto; consola.registro(App a la escucha en http://%s:%s, host, puerto); }); |
Estas son las diferentes cosas que suceden:
- Requiere el módulo Node.js que instalaste anteriormente.
- Instanciar una nueva instancia de express y utilizar la función bodyParser middleware sólo para el /google_signin punto final.
- Proxy todas las demás solicitudes a Sync Gateway.
- Inicia el servidor web Node.js en el puerto 8000.
Inicie el servidor con $ node server.js
y abrir http://localhost:8000
en su navegador. Debería ver el mensaje de bienvenida de Sync Gateway:
De Google SignIn a las sesiones de Sync Gateway
Una vez instalado el proxy inverso, puede añadir código para gestionar la solicitud de inicio de sesión de Google y devolver las credenciales de sesión:
En este diagrama ocurren varias cosas:
- Negro envía el ID de usuario de Google al servidor de aplicaciones.
- Azul comprueba si existe un usuario en Sync Gateway con ese ID de usuario.
- Naranja crea el usuario si aún no existe (normalmente, la primera vez que el usuario inicia sesión con Google en tu aplicación).
- Verde crea una sesión, la respuesta contendrá las credenciales de sesión que se pueden pasar a la aplicación cliente iOS para las réplicas push/pull. Todos los SDKs de Couchbase Lite tienen un método para especificar las credenciales de sesión que se utilizarán en las réplicas push/pull.
En el /google_signin añada lo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/** URL de la instancia de Sync Gateway que se ejecuta localmente */ var stringURL = http://0.0.0.0:4985/simple-login; /** Dado el nombre de un usuario que existe en Sync Gateway, crear una nueva sesión */ var sessionRequest = función (nombre, devolución de llamada) { devolver solicitar({ método: POST, url: stringURL + /_sesión, json: verdadero, cuerpo: { nombre: nombre } }, devolución de llamada); }; var json = consulte.cuerpo; var nombre = json.auth_provider + '-' + json.usuario_id.toString(); solicitar /** Comprobar si el usuario ya existe */ .consiga(stringURL + "/_usuario/ + nombre) .en(respuesta, función (userExistsResponse) { si (userExistsResponse.statusCode === 404) { /** Si el usuario no existe, crea uno con el ID de usuario de Google como nombre */ devolver solicitar .poner({ url: stringURL + "/_usuario/ + nombre, json: verdadero, cuerpo: { nombre: nombre, contraseña: Matemáticas.al azar.toString(36).substr(2) } }) .en(respuesta, función (createUserResponse) { si (createUserResponse.statusCode === 201) { /** Si el usuario se ha creado correctamente, crea la sesión */ sessionRequest(nombre, función (sessionError, sessionResponse, cuerpo) { res.enviar(cuerpo); }); } }); } /** El usuario ya existe, simplemente crea una nueva sesión */ sessionRequest(nombre, función (sessionError, sessionResponse, cuerpo) { res.enviar(cuerpo); }); }); |
Reinicia la aplicación Node.js y ejecuta la siguiente petición curl para dar de alta un nuevo usuario:
1 2 3 4 5 6 7 8 9 10 11 |
$ rizo -vX POST -H Content-Type: application/json' http://localhost:8000/google_signin -d '{"user_id": "123", "auth_provider": "google"}' // Respuesta { "session_id":"8520c19159a4154abf5fb9b9003ff9677e035929", "caduca":"2015-10-13T12:48:05.879325313+01:00", "nombre_galleta":"SyncGatewaySession" } |
En la siguiente sección, crearás una sencilla aplicación iOS con Swift 2 para utilizar la nueva funcionalidad de tu App Server.
Swift Time: Pantalla de inicio de sesión sencilla para iOS
Cambie a Xcode y cree un nuevo proyecto con la etiqueta Aplicación de vista única plantilla:
Usaremos Cocoapods para instalar dependencias en este proyecto. Cierra el proyecto Xcode y desde la línea de comandos ejecuta $ pod init
para migrar su proyecto al uso de Cocoapods. Abra el archivo Podfile y añade las declaraciones:
1 2 |
vaina Google/SignIn vaina couchbase-lite-ios |
Ejecutar Instalación de la vaina $
y abra el SimpleLogin.xcworkspace que se ha generado. A continuación, añadirás una cabecera puente para acceder a los SDK de Google SignIn y CouchbaseLite que utilizan Objective-C desde tu código Swift. En el navegador de proyectos de Xcode, haz clic con el botón derecho en SimpleLogin y selecciona Nuevo archivo.... Elija la plantilla Header File y llámela encabezado-puente.h. Añada las siguientes sentencias import:
1 2 |
#importar #importar |
Ahora tienes que decirle a Xcode que utilice este archivo. En la ventana SimpleLogin objetivo, seleccione el Ajustes de construcción y desplácese hasta la pestaña Cabecera puente Objective-C. Añade esta ruta de archivo:
SimpleLogin/bridging-header.h
Archivo de configuración de Google Sign-In
Antes de poder utilizar el SDK de inicio de sesión en tu aplicación, tendrás que crear un nuevo proyecto en Google Developer Console y generar un ID de cliente. Por suerte para nosotros, esto se puede hacer automáticamente con el siguiente enlace:
https://developers.google.com/mobile/add?platform=ios&cntapi=signin&cntapp=Simple%20Login&cntpkg=com.couchbase.SimpleLogin
En la página anterior, haga clic en el botón Elegir y configurar servicios y accederá a una nueva página en la que podrá activar Inicio de sesión en Google. A continuación, haga clic en Generar archivos de configuración y descarga el nuevo archivo plist.
Importar GoogleServer-Info.plist a su proyecto Xcode:
Añadir esquemas de URL a su proyecto
Google Sign-In requiere que se añadan dos esquemas de URL personalizados a su proyecto. Para añadir los esquemas personalizados:
- Abra la configuración de su proyecto: haga doble clic en el nombre del proyecto en la vista en árbol de la izquierda. Seleccione su aplicación en el menú OBJETIVOS y, a continuación, seleccione Información y amplíe la pestaña Tipos de URL sección.
- Haga clic en el botón + y añada un esquema de URL para su ID de cliente invertido. Para encontrar este valor, abra la ventana
GoogleService-Info.plist
y busque el campoREVERSED_CLIENT_ID
clave. Copie el valor de esa tecla y péguelo en el campo Esquemas de URL en la página de configuración. Deje los demás campos en blanco. - Haga clic en el botón + y añada un segundo esquema de URL. Este es el mismo que el ID del paquete de tu aplicación. En este caso, debería ser com.couchbase.SimpleLogin.
Una vez completado, su configuración debe ser algo similar a lo siguiente (pero con los valores específicos de su aplicación):
Cómo integrar el inicio de sesión de Google en tu aplicación para iOS
Ahora que tu proyecto está configurado correctamente puedes empezar a usar el SDK para añadir el botón de Login en la UI y la lógica de la aplicación para recuperar la información del usuario. En AppDelegate.swiftdeclara que esta clase implementa el método GIDSignInDelegate
y añada lo siguiente en el campo application:didFinishLaunchingConOpciones:
método:
1 2 3 4 5 6 7 8 9 10 11 |
func aplicación(aplicación: Aplicación UIA, didFinishLaunchingWithOptions launchOptions: [NSObject: CualquierObjeto]?) -> Bool { // Iniciar sesión var configureError: NSError? GGLContext.sharedInstance().configureWithError(&configureError) afirme(configureError == nil, "Error al configurar los servicios de Google: (configureError)") GIDSignIn.sharedInstance().delegado = auto devolver verdadero } |
A continuación, aplique el aplicación:openURL:
del delegado de la aplicación. El método debe llamar al método handleURL
método del GIDSignIn
que gestionará correctamente la URL que reciba su aplicación al final del proceso de autenticación:
1 2 3 4 5 6 |
func aplicación(aplicación: Aplicación UIA, openURL url: NSURL, sourceApplication: Cadena?, anotación: CualquierObjeto?) -> Bool { devolver GIDSignIn.sharedInstance().handleURL(url, sourceApplication: sourceApplication, anotación: anotación) } |
En el delegado de la aplicación, implemente el método GIDSignInDelegate
para gestionar el proceso de inicio de sesión mediante la definición de los siguientes métodos:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
func signIn(signIn: GIDSignIn!, didSignInForUser usuario: GIDGoogleUsuario!, conError error: NSError!) { si (error == nil) { // Realiza aquí cualquier operación sobre el usuario registrado. deje userId = usuario.userID // ¡Sólo para uso del cliente! deje idToken = usuario.autenticación.idToken // Seguro para enviar al servidor deje nombre = usuario.perfil.nombre deje correo electrónico = usuario.perfil.correo electrónico // ... } si no { println("(error.localizedDescription)") } } |
Añadir el botón de inicio de sesión
A continuación, añadirás el botón de inicio de sesión de Google para que el usuario pueda iniciar el proceso de inicio de sesión. En el controlador de vista que gestiona la pantalla de inicio de sesión de tu aplicación, haz que la clase implemente el método GIDSignInUIDelegado
protocolo.
En el controlador de vista, anule el método viewDidLoad para establecer el delegado de interfaz de usuario del objeto GIDSignIn y (opcionalmente) para iniciar sesión de forma silenciosa cuando sea posible.
1 2 3 4 5 6 7 8 9 10 11 |
anular func viewDidLoad() { super.viewDidLoad() GIDSignIn.sharedInstance().uiDelegate = auto // Descomentar para registrar automáticamente al usuario. //GIDSignIn.sharedInstance().signInSilently() // TODO(desarrollador) Configurar la apariencia del botón de inicio de sesión // ... } |
Aplicar la GIDSignInUIDelegado
protocolo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Implementar estos métodos sólo si el GIDSignInUIDelegate no es una subclase de // UIViewController. // Detener la animación UIActivityIndicatorView que se inició cuando el usuario // ha pulsado el botón Iniciar sesión func signInWillDispatch(signIn: GIDSignIn!, error: NSError!) { miIndicadorDeActividad.stopAnimating() } // Presentar una vista que pida al usuario que inicie sesión con Google func signIn(signIn: GIDSignIn!, presentViewController viewController: UIViewController!) { auto.presentViewController(viewController, animado: verdadero, finalización: nil) } // Desactivar la vista "Iniciar sesión con Google func signIn(signIn: GIDSignIn!, dismissViewController viewController: UIViewController!) { auto.dismissViewControllerAnimated(verdadero, finalización: nil) } |
Añadir un GIDSignInButton
a su guión gráfico, archivo XIB, o instanciarlo mediante programación. Para añadir el botón al guión gráfico o al archivo XIB, añada una vista y defina su clase personalizada como GIDSignInButton
.
Ejecuta la aplicación y ahora deberías ver el botón con el estilo de Google y poder iniciar sesión:
Creación de una sesión con Sync Gateway
En AppDelegate.swiftencuentre el signIndidSignInForUserwithError
y añada lo siguiente debajo del código existente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 1 deje loginURL = NSURL(cadena: "http://localhost:8000/google_signin")! // 2 deje sesión = NSURLSession.sharedSession() deje solicitar = NSMutableURLRequest(URL: loginURL) solicitar.addValue("application/json", forHTTPHeaderField: "Tipo de contenido") solicitar.HTTPMétodo = "POST" // 3 var propiedades = [ "user_id": userId, "auth_provider": "google" ] deje datos = pruebe! NSJSONSerialization.dataWithJSONObject(propiedades, opciones: NSJSONWritingOptions.PrettyPrinted) // 4 deje uploadTask = sesión.uploadTaskWithRequest(solicitar, fromData: datos, completionHandler: { (datos, respuesta, error) -> Vacío en // 5 deje json = pruebe! NSJSONSerialization.JSONObjectConDatos(datos!, opciones: NSJSONReadingOptions.PermitirFragmentos) como! Diccionario<Cadena, CualquierObjeto> imprimir("(json)") // TODO: réplicas pull/push con usuario autenticado }) uploadTask.curriculum vitae() |
Esto es lo que ocurre arriba:
- La URL de inicio de sesión en el App Server que se ejecuta localmente.
- Crear una instancia de solicitud.
- Serializa las propiedades que contienen el ID de usuario de Google como JSON para enviarlas en la solicitud.
- Enviar solicitud POST.
- Objeto de respuesta que contiene las credenciales de la sesión de Sync Gateway
NOTA: Antes de ejecutar la aplicación, asegúrese de desactivar la seguridad de App Transport, ya que App Server no utiliza HTTPS. Abra Info.plist y añade lo siguiente:
1 2 3 4 |
NSAppTransportSecurity NSAllowsArbitraryLoads |
Construir y ejecutar. Observa la respuesta del App Server en el depurador de Xcode:
Por último, añadirás el código de Couchbase para iniciar una replicación pull con los detalles de la sesión. En AppDelegate.mañada el método startReplications
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
func startReplications(sessionInfo: Diccionario<Cadena, Cadena>) { // 1 deje dateString = sessionInfo["caduca"]! deje formato de fecha = NSDateFormatter() formato de fecha.formato de fecha = "aaaa-MM-dd'T'HH:mm:ss.SSSZ" deje fecha = formato de fecha.dateFromString(dateString)! // 2 deje director = CBLManager.sharedInstance(); deje base de datos = pruebe! director.base de datosNamed("simple-login") // 3 deje syncGatewayURL = NSURL(cadena: "http://localhost:8000/simple-login")! deje tire de = base de datos.createPullReplication(syncGatewayURL) tire de?.continuo = verdadero // 4 tire de?.setCookieNamed(sessionInfo["nombre_galleta"]!, conValor: sessionInfo["session_id"]!, ruta: "/", fecha de expiración: fecha, seguro: falso) tire de?.iniciar() } |
Llama a este método en el callback de la uploadTask que has añadido en el paso anterior.
¡Et voilà! Ahora tiene una replicación pull en ejecución para el usuario con nombre google-{userID}
. Puedes probar que el acceso funciona añadiendo un documento con el siguiente comando (sustituye el ID de usuario de Google por el de un usuario ya conectado):
1 2 3 4 |
$ rizo -vX POST -H Content-Type: application/json' http://localhost:4985/simple-login/ -d '{"_id": "1234", "user_id": "google-102898171485172449137"}' |
Vaya a la pestaña Usuarios de la interfaz de administración en http://localhost:4985/_admin/db/simple-login/users y observe que el usuario google-102898171485172449137
ahora tiene acceso al canal 1234
:
¿Qué hacer a partir de ahora?
¡Enhorabuena! Has aprendido a utilizar Google SignIn con Couchbase Mobile para crear una experiencia agradable y sincronizar documentos por el ID de usuario del usuario conectado.
No dudes en compartir tus opiniones, hallazgos o preguntas en los comentarios o en los foros. ¡Hasta pronto!