Projeto de estudo sobre OAuth e Deep Linking usando React Native
Resumidamente, é um protocolo que permite que clientes de uma aplicação se autentiquem através de uma aplicação de terceiro, como Facebook, Google, Github...
Primeiramente, precisamos criar um OAuth App no Github, para isso, podemos ir em:
Settings -> Developer Settings -> OAuth Apps. E vamos criar um novo OAuthApp.
Esse campo Authorization callback URL é bastante importante, pois é o ulr a qual o usuário será redirecionado após realizar o login. Digo que é importante pois queremos que o usuário seja redirecionado para o nosso aplicativo novamente, ai que entra o Deep Linking.
O Deep Linking é uma forma do usuário abrir/acessar a aplicação apartir de uma outra aplicação, como um website. Para utilizar o Deep Linking no React Native é necessário realizar algumas configurações nos arquivos iOS e Android, porém é algo simple e vou recomendar esse post da Rocketseat, Configurando deep linking no React Native, com ele você irá entender o conceito e como configurar o Deep Linking.
No caso dessa aplicação, eu utilizei a url de callback: githubauth://githubauth. Então no iOS, no URL Types, eu coloquei githubauth. No Android, dentro do AndroidManifest.xml, eu coloquei o scheme e o host como githubauth. Assim, em ambas plataformas o usuário será redirecionado ao aplicativo. O filtro adicionado no Manifest do android ficou assim:
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="githubauth" android:host="githubauth" />
</intent-filter>Agora com o OAuth App e Deep Linking cadastrado, vamos requisitar a autenticação do usuário no github. Para isso, vamos utilizar o Linking do react-native. Vamos utilizar o método openURL, a url que iremos abrir é https://github.com/login/oauth/authorize, ela recebe alguns parâmetros:
- scopes: Como os tipos de acesso que você está pedindo ao usuário, você pode ver todos os tipos de acesso nesse link: Understanding scopes for OAuth Apps.
- client_id : Você pode buscar essa informação indo no Github e acessando o seu OAuth App.
A nossa url terá esse formato: https://github.com/login/oauth/authorize?scope=&client_id=.
Você pode verificar a implementação AQUI.
Esses são os dados gerados no momento que você cria o seu OAuth App, no github. Então basta você acessar Settings -> Developer Settings -> OAuth Apps e selecionar o seu aplicativo. Você verá algo parecido com isso:
Depois que o usuário clicar no botão, o Linking irá abrir um página para que o usuário coloque as credenciais do Github, depois ele será redirecionado a nossa aplicação devido o Deep Linking que configuramos. O Github nos retorna a aplicação, nos passando a url de callback que informamos, porém ele também nos retorna um code como parâmetro. Esse code tem validade de 10 minutos e precisamos realizar uma requisição para buscar um token de acesso.
Então será necessário realizar uma requisiçao POST, para o endpoint: https://github.com/login/oauth/access_token. No corpo da requisição, precisamos passar alguns parâmetros: client_id, client_secret e code.
Você pode verificar a implementação AQUI.
Pronto!!, agora você tem o token de acesso e pode fazer muita coisa dependendo do acesso pedido nos scopes. Por exemplo, agora é possível criar um repositório, basta passar o token no header da requisição, você pode ver um exemplo de requisição utilizando o token AQUI.
Nesse caso, eu busquei os dados do usuário logado e mostrei em uma nova tela.
Você pode ver todas as informacoes sobre a api do Github e as requisicoes na Documentacao da REST API v3.
