O uso de APIs OAuth fornecidas por aplicativos de terceiros, como o Google+, para fazer login no seu aplicativo móvel pode proporcionar uma experiência agradável aos usuários na primeira vez. Eles podem fazer login com uma conta que já conhecem e confiam e preencher o perfil com os dados que inseriram no Google+. Neste tutorial, você aprenderá a:
- Escreva um aplicativo Node.js para lidar com a autenticação com o Sync Gateway.
- Use a API REST do administrador do Couchbase Sync Gateway para criar usuários e sessões.
- Integre o Google Sign-In a um aplicativo iOS escrito com Swift 2.
- Crie um aplicativo iOS simples em Swift para testar o novo endpoint de login e replicar alguns documentos.
O projeto final pode ser encontrado em GitHub.
Pré-requisitos
Os pré-requisitos para este tutorial são:
- Node.js
- Xcode 7+ (você usará o Swift 2 para criar o aplicativo de amostra)
Primeiros passos
Faça o download do Sync Gateway no link abaixo e descompacte o arquivo:
http://www.couchbase.com/nosql-databases/downloads
Em um novo arquivo chamado sync-gateway-config.json, cole o seguinte:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "log": ["*"], "bancos de dados": { "simple-login": { "servidor": "walrus:", "usuários": { "CONVIDADO": { "desativado": verdadeiro } }, "sync": ` função(doc, oldDoc) { canal(doc._id); acesso(doc.user_id, doc._id); } ` } } } |
Nesse arquivo de configuração, você está criando um banco de dados chamado login simples e usando a função Sync para mapear cada documento para um canal diferente e conceder a um usuário acesso ao canal (o nome do usuário é armazenado no user_id
do documento).
Inicie o Sync Gateway com o seguinte comando:
1 |
$ ~/Downloads/couchbase-sincronização-portal/caixa/portais de sincronização sincronização-portal-configuração.json |
Proxy reverso para gateway de sincronização
Com o Sync Gateway em execução, você pode mudar seu foco para a criação do App Server para lidar com a autenticação entre o Google e o Sync Gateway.
Você usará o popular Expresso para tratar a solicitação de criação de um usuário e o módulo solicitação para fazer proxy de todos os outros tráfegos para o Sync Gateway.
Instale os seguintes módulos do Node.js:
1 |
$ npm instalar expresso corpo-analisador solicitação --salvar |
Crie um novo arquivo chamado servidor.js e adicione o seguinte:
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 expresso = exigir("expresso) , bodyParser = exigir('body-parser') , solicitação = solicitação("solicitação).padrões({json: verdadeiro}); // 2 var aplicativo = expresso(); aplicativo.uso('/google_signin', bodyParser.json()); aplicativo.postagem('/google_signin', função (req, res) { // TODO: lidar com a solicitação de login }); // 3 aplicativo.todos('*', função (req, res) { var url = 'http://0.0.0.0:4984' + req.url; req.tubulação(solicitação(url)).tubulação(res); }); // 4 var servidor = aplicativo.ouvir(8000, função () { var hospedeiro = servidor.endereço().endereço; var porto = servidor.endereço().porto; console.registro('App listening em http://%s:%s', hospedeiro, porto); }); |
Aqui estão as diferentes coisas que estão acontecendo:
- Requer o módulo Node.js que você instalou anteriormente.
- Instanciar uma nova instância do express e usar o bodyParser middleware apenas para o /google_signin ponto final.
- Proxy de todas as outras solicitações para o Sync Gateway.
- Inicie o servidor da Web Node.js na porta 8000.
Inicie o servidor com $ node server.js
e aberto http://localhost:8000
em seu navegador. Você verá a mensagem de boas-vindas do Sync Gateway:
Do Google SignIn para sincronizar sessões do Gateway
Com o proxy reverso instalado, agora você pode adicionar algum código para tratar a solicitação do Google SignIn e retornar as credenciais da sessão:
Algumas coisas estão acontecendo nesse diagrama:
- Preto envia o ID de usuário do Google para o App Server.
- Azul verifica se existe um usuário no Sync Gateway com esse ID de usuário.
- Laranja cria o usuário se ele ainda não existir (normalmente, na primeira vez em que o usuário faz login com o Google no seu aplicativo).
- Verde cria uma sessão, a resposta conterá credenciais de sessão que podem ser passadas para o aplicativo cliente iOS para replicações push/pull. Todos os SDKs do Couchbase Lite têm um método para especificar as credenciais de sessão a serem usadas nas replicações push/pull.
No /google_signin adicione o seguinte:
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 da instância do Sync Gateway em execução localmente */ var stringURL = 'http://0.0.0.0:4985/simple-login'; /** Dado o nome de um usuário que existe no Sync Gateway, crie uma nova sessão */ var sessionRequest = função (nome, retorno de chamada) { retorno solicitação({ método: 'POST', url: stringURL + '/_session', json: verdadeiro, corpo: { nome: nome } }, retorno de chamada); }; var json = req.corpo; var nome = json.provedor de autenticação + '-' + json.user_id.toString(); solicitação /** Verificar se o usuário já existe */ .obter(stringURL + '/_user/' + nome) .em('resposta', função (userExistsResponse) { se (userExistsResponse.statusCode === 404) { /** Se o usuário não existir, crie um com o ID de usuário do Google como nome */ retorno solicitação .colocar({ url: stringURL + '/_user/' + nome, json: verdadeiro, corpo: { nome: nome, senha: Matemática.aleatório.toString(36).substrato(2) } }) .em('resposta', função (createUserResponse) { se (createUserResponse.statusCode === 201) { /** Se o usuário tiver sido criado com êxito, crie a sessão */ sessionRequest(nome, função (sessionError, sessionResponse, corpo) { res.enviar(corpo); }); } }); } /** O usuário já existe, basta criar uma nova sessão */ sessionRequest(nome, função (sessionError, sessionResponse, corpo) { res.enviar(corpo); }); }); |
Reinicie o aplicativo Node.js e execute a seguinte solicitação curl para registrar um novo usuário:
1 2 3 4 5 6 7 8 9 10 11 |
$ enrolar -vX POST -H 'Content-Type: application/json' http://localhost:8000/google_signin -d '{"user_id": "123", "auth_provider": "google"}' // Resposta { "session_id":"8520c19159a4154abf5fb9b9003ff9677e035929", "expira":"2015-10-13T12:48:05.879325313+01:00", "cookie_name":"SyncGatewaySession" } |
Na próxima seção, você criará um aplicativo iOS simples com o Swift 2 para usar a nova funcionalidade do seu App Server.
Swift Time: tela de login simples para iOS
Vá para o Xcode e crie um novo projeto com a tag Aplicativo de visualização única modelo:
Usaremos o Cocoapods para instalar dependências neste projeto. Feche o projeto Xcode e, na linha de comando, execute Inicialização do pod $
para migrar seu projeto para o uso de Cocoapods. Abra o arquivo Podfile e adicione as declarações:
1 2 |
cápsula 'Google/SignIn' cápsula 'couchbase-lite-ios' |
Executar Instalação do pod $
e abra o SimpleLogin.xcworkspace que foi gerado. Em seguida, você adicionará um cabeçalho de ponte para acessar os SDKs do Google SignIn e do CouchbaseLite que usam Objective-C a partir do seu código Swift. No navegador de projetos do Xcode, clique com o botão direito do mouse em SimpleLogin e selecione Novo arquivo.... Escolha o modelo Header File e chame-o de bridging-header.h. Adicione as seguintes instruções de importação:
1 2 |
#import #import |
Agora você precisa informar ao Xcode para usar esse arquivo. No arquivo SimpleLogin alvo, selecione o Configurações de construção e role para baixo até a guia Cabeçalho de ponte em Objective-C. Adicione este caminho de arquivo:
SimpleLogin/bridging-header.h
Arquivo de configuração de login do Google
Antes de poder usar o SDK de login em seu aplicativo, você precisará criar um novo projeto no Google Developer Console e gerar um ID de cliente. Felizmente para nós, isso pode ser feito automaticamente com o seguinte link:
https://developers.google.com/mobile/add?platform=ios&cntapi=signin&cntapp=Simple%20Login&cntpkg=com.couchbase.SimpleLogin
Na página acima, clique no botão Escolha e configure serviços e você será levado a uma nova página na qual poderá ativar o Login do Google. A partir daí, clique em Gerar arquivos de configuração e faça o download do novo arquivo plist.
Importação GoogleServer-Info.plist em seu projeto Xcode:
Adição de esquemas de URL ao seu projeto
O Google Sign-In exige que dois esquemas de URL personalizados sejam adicionados ao seu projeto. Para adicionar os esquemas personalizados:
- Abra a configuração do projeto: clique duas vezes no nome do projeto na visualização em árvore à esquerda. Selecione seu aplicativo na seção METAS e, em seguida, selecione a seção Informações e expanda a guia Tipos de URL seção.
- Clique no botão + e adicione um esquema de URL para seu ID de cliente invertido. Para encontrar esse valor, abra o arquivo
GoogleService-Info.plist
e procure o arquivo de configuraçãoREVERSED_CLIENT_ID
chave. Copie o valor dessa chave e cole-o no campo Esquemas de URL na página de configuração. Deixe os outros campos em branco. - Clique no botão + e adicione um segundo esquema de URL. Esse esquema é o mesmo que o ID do pacote do seu aplicativo. Nesse caso, ele deve ser com.couchbase.SimpleLogin.
Quando concluída, sua configuração deve ser semelhante à seguinte (mas com os valores específicos do aplicativo):
Integração do Google Sign-In em seu aplicativo iOS
Agora que seu projeto está configurado corretamente, você pode começar a usar o SDK para adicionar o botão Login na interface do usuário e a lógica do aplicativo para recuperar as informações do usuário. Em AppDelegate.swiftdeclare que essa classe implementa a classe GIDSignInDelegate
e adicione o seguinte no campo aplicativo:didFinishLaunchingWithOptions:
método:
1 2 3 4 5 6 7 8 9 10 11 |
func aplicativo(aplicativo: Aplicativo UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObjeto: Qualquer objeto]?) -> Bool { // Inicializar o login var configureError: NSError? GGLContexto.sharedInstance().configureWithError(&lificador;configureError) afirmar(configureError == nulo, "Erro ao configurar os serviços do Google: (configureError)") GIDSignIn.sharedInstance().delegado = autônomo retorno verdadeiro } |
Em seguida, implemente o aplicativo:openURL:
do seu aplicativo delegado. O método deve chamar o handleURL
do método GIDSignIn
que tratará corretamente o URL que seu aplicativo recebe no final do processo de autenticação:
1 2 3 4 5 6 |
func aplicativo(aplicativo: Aplicativo UIApplication, openURL url: NSURL, sourceApplication (aplicativo de origem): Cordas?, anotação: Qualquer objeto?) -> Bool { retorno GIDSignIn.sharedInstance().handleURL(url, sourceApplication (aplicativo de origem): sourceApplication (aplicativo de origem), anotação: anotação) } |
No delegado do aplicativo, implemente o GIDSignInDelegate
para lidar com o processo de login, definindo os seguintes métodos:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
func Entrar(Entrar: GIDSignIn!, didSignInForUser usuário: GIDGoogleUser!, withError erro: NSError!) { se (erro == nulo) { // Execute quaisquer operações no usuário conectado aqui. deixar userId = usuário.ID do usuário // Apenas para uso no lado do cliente! deixar idToken = usuário.autenticação.idToken // Seguro para enviar ao servidor deixar nome = usuário.perfil.nome deixar e-mail = usuário.perfil.e-mail // ... } mais { println("(error.localizedDescription)") } } |
Adição do botão de login
Em seguida, você adicionará o botão Google Sign-In para que o usuário possa iniciar o processo de login. No view controller que gerencia a tela de login do seu aplicativo, faça com que a classe implemente a classe GIDSignInUIDelegado
protocolo.
No view controller, substitua o método viewDidLoad para definir o delegado da interface do usuário do objeto GIDSignIn e (opcionalmente) para fazer login silenciosamente quando possível.
1 2 3 4 5 6 7 8 9 10 11 |
anular func viewDidLoad() { super.viewDidLoad() GIDSignIn.sharedInstance().uiDelegado = autônomo // Descomente para fazer login automaticamente no usuário. //GIDSignIn.sharedInstance().signInSilently() // TODO(desenvolvedor) Configurar a aparência do botão de login // ... } |
Implementar o GIDSignInUIDelegado
protocolo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Implemente esses métodos somente se o GIDSignInUIDelegate não for uma subclasse de // UIViewController. // Parar a animação do UIActivityIndicatorView que foi iniciada quando o usuário // pressionou o botão Entrar func signInWillDispatch(Entrar: GIDSignIn!, erro: NSError!) { myActivityIndicator.stopAnimating() } // Apresentar uma exibição que solicita que o usuário faça login no Google func Entrar(Entrar: GIDSignIn!, presentViewController viewController: UIViewController!) { autônomo.presentViewController(viewController, animado: verdadeiro, conclusão: nulo) } // Desativar a visualização "Fazer login com o Google func Entrar(Entrar: GIDSignIn!, dispensarViewController viewController: UIViewController!) { autônomo.dismissViewControllerAnimated(verdadeiro, conclusão: nulo) } |
Adicionar um GIDSignInButton
ao seu storyboard ou arquivo XIB, ou instanciá-lo programaticamente. Para adicionar o botão ao seu storyboard ou arquivo XIB, adicione uma visualização e defina sua classe personalizada como GIDSignInButton
.
Execute o aplicativo e você verá o botão com o estilo do Google e poderá fazer login:
Criação de uma sessão com o Sync Gateway
Em AppDelegate.swift, encontre o signIndidSignInForUserwithError
e adicione o seguinte abaixo do 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 deixar loginURL = NSURL(string: "http://localhost:8000/google_signin")! // 2 deixar sessão = NSURLSession.sharedSession() deixar solicitação = NSMutableURLRequest(URL: loginURL) solicitação.addValue("application/json", paraHTTPHeaderField: "Content-Type") solicitação.HTTPMethod = "POST" // 3 var propriedades = [ "user_id": userId, "auth_provider": "google" ] deixar dados = tentar! NSJSONSerialização.dataWithJSONObject(propriedades, opções: NSJSONWritingOptions.PrettyPrinted) // 4 deixar uploadTask = sessão.uploadTaskWithRequest(solicitação, fromData: dados, completionHandler: { (dados, resposta, erro) -> Vazio em // 5 deixar json = tentar! NSJSONSerialização.JSONObjectWithData(dados!, opções: NSJSONReadingOptions.AllowFragments) como! Dicionário<Cordas, Qualquer objeto> impressão("(json)") // TODO: replicações pull/push com usuário autenticado }) uploadTask.currículo() |
Veja o que está acontecendo acima:
- O URL de login no App Server em execução local.
- Criar uma instância de solicitação.
- Serialize as propriedades que contêm o ID de usuário do Google como JSON a ser enviado na solicitação.
- Enviar solicitação POST.
- Objeto de resposta que contém as credenciais da sessão do Sync Gateway
OBSERVAÇÃO: Antes de executar o aplicativo, certifique-se de desativar a segurança do App Transport, pois o App Server não está usando HTTPS. Abra o aplicativo Info.plist e adicione o seguinte:
1 2 3 4 |
NSAppTransportSecurity NSAllowsArbitraryLoads |
Compilar e executar. Observe a resposta do App Server no depurador do Xcode:
Por fim, você adicionará o código do Couchbase para iniciar uma replicação pull com os detalhes da sessão. Em AppDelegate.m, adicione o 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: Dicionário<Cordas, Cordas>) { // 1 deixar dateString = sessionInfo["expira"]! deixar dateFormatter = NSDateFormatter() dateFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSZ" deixar data = dateFormatter.dateFromString(dateString)! // 2 deixar gerente = Gerenciador de CBL.sharedInstance(); deixar banco de dados = tentar! gerente.databaseNamed("simple-login") // 3 deixar syncGatewayURL = NSURL(string: "http://localhost:8000/simple-login")! deixar puxar = banco de dados.createPullReplication(syncGatewayURL) puxar?.contínuo = verdadeiro // 4 puxar?.setCookieNamed(sessionInfo["cookie_name"]!, comValor: sessionInfo["session_id"]!, caminho: "/", data de expiração: data, seguro: falso) puxar?.iniciar() } |
Chame esse método na chamada de retorno do uploadTask que você adicionou na etapa anterior.
E pronto! Agora você tem uma replicação pull em execução para o usuário com o nome google-{userID}
. Você pode testar se o acesso está funcionando adicionando um documento com o seguinte comando (substitua o ID de usuário do Google pelo de um usuário já conectado):
1 2 3 4 |
$ enrolar -vX POST -H 'Content-Type: application/json' http://localhost:4985/simple-login/ -d '{"_id": "1234", "user_id": "google-102898171485172449137"}' |
Vá até a guia Usuários na interface do usuário do administrador em http://localhost:4985/_admin/db/simple-login/users e observe que o usuário google-102898171485172449137
agora tem acesso ao canal 1234
:
Para onde ir a partir de agora
Parabéns! Você aprendeu a usar o Google SignIn com o Couchbase Mobile para criar uma experiência agradável e sincronizar documentos de acordo com o ID do usuário conectado.
Sinta-se à vontade para compartilhar seus comentários, descobertas ou fazer perguntas nos comentários abaixo ou nos fóruns. Falamos com você em breve!