Como Criar Chave de API: Instagram

Como Criar Chave de API: Instagram

Nesse novo tutorial da Easy Easy Apps, nós iremos mostrar como criar uma chave de API para sincronizar as publicações de fotos da sua conta no Instagram. Isso ocorrerá através do recurso “Imagem” do nosso editor de apps, criando assim uma galeria dessas fotos.

Para fazer isso precisamos de duas informações cruciais, o Client ID (Identificação do Cliente) e o Access Token (Token de Acesso).

Então ao longo do tutorial explicaremos como obter ambas e configurá-las no local correto dentro do editor de aplicativos.

Importante: Se você tem interesse nesse tutorial, provavelmente também já possui uma conta no Instagram. Mas caso ainda não tenha, crie uma, pois é fundamental desde o início desse tutorial. Para isso, basta baixar o aplicativo ou acessar o site delehttp://www.instagram.com/

Agora vamos ao passo-a-passo!

1 – Se Cadastrando no Site de Desenvolvedores do Instagram

1.1 – Acesse o seguinte endereço: http://www.instagram.com/developer/

1.2 – Na página que irá ser aberta, clique em “Manage Clients”.

1.3 – Agora será necessário preencher alguns campos com suas informações.

  • Seu site: Insira aqui o endereço do site do seu projeto, caso não tenha um, use o nosso: http://www.easyeasyapps.net (Por algum motivo, este foi o único campo que apareceu em português. A página do Instagram destinada a desenvolvedores geralmente é toda no idioma Inglês.)
  • Phone number: Nesse campo, informe o número de seu telefone.
  • What do you want to build with the API?: Aqui devemos dar uma breve explicação sobre o motivo e o uso que daremos a API. Você pode copiar e colar esse exemplo: “This Instagram app allows the users to integrate Instagram photo galleries in their mobile applications.” (Em inglês mesmo)

Preenchido todos os campos, marque a caixa de opção “I accept the API Terms of Use and Brand Guidelines” e clique no botão “Sign up”, logo abaixo.

2 – Registrando seu Client ID

Tendo realizado os passos anteriores, provavelmente você será redirecionado para a primeira página que acessamos.

2.1 – Caso isso realmente tenha acontecido, clique novamente no botão “Manage Clients”.

2.2 – Na nova página que carregou, clique em “Register a New Client”.

2.3 – Para registrar nosso Client ID, será necessário o preenchimento de mais algumas informações.

  • Application Name: Insira o nome do seu aplicativo.
  • Description: Preencha com uma descrição sobre o funcionamento da integração do app com a API do Instagram. Você pode utilizar o mesmo texto que demos de exemplo para o preenchimento do campo “What do you want to build with the API?”, no passo de número 3 desse mesmo tutorial.
  • Company Name: Utilize aqui o nome de sua empresa ou projeto, que pode ser inclusive o mesmo nome do seu aplicativo.
  • Website URL: Informe o site de sua empresa ou projeto. Se não tiver, você pode utilizar um endereço nosso, como: http://platform.easyeasyapps.net/
  • Valid redirect URIs: Aqui deve ser informado um endereço para redirecionamento, após a autentificação de sua aplicação. Não se preocupe em entender exatamente o que isso significa, pois você verá mais detalhes nos próximos passos. É importante que a url utilizada aqui não redirecione para outro endereço ou passe algum parâmetro desnecessário, isso pode prejudicar em etapas posteriores. Portanto, para evitar erros, recomendamos a utilização da url de nossa plataforma: http://platform.easyeasyapps.net/
  • Privacy Policy URL: Coloque nesse campo o endereço de Política de Privacidade, se não tiver um, use o que geramos automaticamente para você em nosso editor de aplicativos. Sua url está localizada na aba lateral “Configurações” do lado esquerdo, na opção “Termos e Condições”.

  • Contact email: Escreva seu e-mail para contato.

Por fim, marque a caixa “Não sou  um robô” e clique em “Register”. Conforme foi demonstrado na primeira imagem desse passo.

Pronto, seu Client ID foi criado.

2.4 – Mas ainda é necessário fazer uma pequena configuração, então clique no botão “Manage”.

2.5 – Na próxima página, clique na aba “Security” e deixe desmarcado a caixa “Disable implicit OAuth:”.

Feito isso, clique em “Update Client”, assim como está na imagem abaixo.

3 – Descobrindo seu Access Token

Nessa etapa devemos descobrir qual é o código de nosso Token de Acesso, que é a segunda informação além do Client ID que precisamos para fazer a integração entre seu aplicativo criado na Easy Easy Apps e sua conta no Instagram.

Descobrir esse código é simples.

3.1 – Copie e cole na barra de endereço de seu navegador a seguinte url:

http://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

3.2 – Depois substitua os trechos “CLIENT-ID” e “REDIRECT-URI” dessa url, respectivamente pelo código do seu Client ID (se tiver dúvida de onde encontrar, na imagem anterior, você consegue observar facilmente sua localização) e pelo endereço que você informou uns passos atrás no campo “Valid redirect URIs”, que nesse caso é: http://platform.easyeasyapps.net/

Usando as informações obtidas em nosso exemplo a url ficará assim:

http://api.instagram.com/oauth/authorize/?client_id=a765af9236664cef84414cdf1f78f979&redirect_uri=http://platform.easyeasyapps.net&response_type=token

Então aperte a tecla “Enter” em seu teclado e aguarde a página seguinte carregar.

3.3 – Terminado o carregamento, clique no botão “Authorize” para autorizar a autentificação da integração entre o app e API do Instagram.

3.4 – Agora você será redirecionado para a página que informamos como redirect URI: http://platform.easyeasyapps.net/

Nesse momento não faça nada, apenas observe a barra de endereço do seu navegador. Devido a forma como montamos anteriormente nossa url, conseguimos obter nosso código do Token de Acesso, o mesmo está localizado logo após o trecho “access_token=”.

3.5 – Copie e cole esse código em algum arquivo de texto em seu computador (como o Bloco de Notas ou o Microsoft Word), depois salve, ele será importante logo mais.

4 – Inserindo o Client ID e o Access Token no Editor de Apps

4.1 – Dentro do editor de aplicativos da Easy Easy Apps, acesse a aba “Configurações” e clique na opção “APIs”.

Desça um pouco até aparecer a parte “Instagram API de configurações”.

Então preencha os campos “Identificação do Cliente” e “Token de Acesso”, repectivamente com as informações que conseguimos nos passos anteriores, o Client ID e Access Token.

5 – Utilizando o Recurso de Imagem Através da API do Instagram

Insira o recurso de “Imagens” em seu aplicativo. Se tiver dúvidas sobre como inserir recursos ou lidar com outras configurações do editor de apps, recomendamos que leia também nosso artigo: Tutorial de uso da Easy Easy Apps: Criando seu Aplicativo!

5.1 – Na opção “Add Content”, clique em “Instagram”.

5.2 – Depois em “Nome da Galeria” coloque o nome que preferir e clique em “Salvar”.

Pronto, está feito a integração!

Observe no celular virtual o resultado.

Importante: É obrigatório para que a integração funcione, que você já tenha adicionado pelo menos uma foto em sua conta do Instagram.

Author: Vasco

Vasco Andrade e Silva é um empreendedor de base tecnológica. Co-fundou a sua primeira empresa de software enquanto concluía o MSc em Engenharia de Software em 2008. Em 2013 criou a Easy Easy Apps com o objetivo de democratizar o desenvolvimento de aplicações móveis – porque acredita que todos devem poder fazer parte da revolução mobile.