Como adicionar SDK do Facebook sem perder a cabeça

Blog • Data Analytics • Como adicionar SDK do Facebook sem perder a cabeça

Implementar o SDK do Facebook em seu app para iOS é como dar um upgrade no seu carro: fica mais potente, mais inteligente e muito mais divertido de usar. Esse kit de ferramentas mágico faz mais do que apenas oferecer um monte de recursos analíticos incrivelmente úteis. Imagine entender o que seus usuários realmente querem! Isso é ouro puro para tornar seu app ainda melhor.

Calma aí, você sabe o que é um SDK?

O Que é SDK?

Antes de mergulharmos no universo Facebook, que tal uma pausa para entender o que é um SDK? A sigla vem do inglês “Software Development Kit”, que traduzindo fica “Kit de Desenvolvimento de Software”. É basicamente uma caixa de ferramentas que torna a vida dos desenvolvedores muito mais fácil. No caso específico do SDK do Facebook, ele nos dá a mãozinha que precisamos para colocar todas aquelas funcionalidades legais do Facebook diretamente nos nossos apps iOS.

Vamos ao Que Interessa: Como começar implementar para IOS?

Pré-Requisitos

Você precisará do seguinte:

Uma conta de desenvolvedor do Facebook
Um ID do app do Facebook
Ajustar as configurações no Painel de Apps
Um projeto com App Delegate UIKit selecionado como ciclo de vida
Uma xícara de café

Obter o ID do app

Cada aplicativo que você cria tem uma espécie de ID única. Você vai precisar desse número único para diversas funções, então é importante saber onde encontrá-lo. Aqui estão os passos para obter o ID do seu aplicativo:

1. Entre na sua conta de desenvolvedor.
2. Abra a página de app.
3. Encontre o seu app e clique em ID do app. O ID do app será copiado para a área de transferência.

Obter o token do cliente

Cada app criado tem um token de cliente único, usado para acessar o Facebook. Para receber o token de cliente de um app, é necessário fazer o seguinte:

Entre na sua conta de desenvolvedor.
Na página Apps, selecione o app para abrir o painel correspondente.
No painel, navegue até Configurações > Avançado > Segurança > Token de cliente.

Etapa 1: configurar o ambiente de desenvolvimento

1. No Xcode, clique em File > Swift Packages > Add Package Dependency.
2. No diálogo exibido, insira a URL do repositório: https://github.com/facebook/facebook-ios-sdk.
3. Em Version, selecione Up to Next Major e a opção padrão.
4. Realize as ações indicadas para selecionar as bibliotecas que deseja usar no seu projeto.

Se você quiser	Adicione este pacote ao projeto
Permitir que o app use os serviços do Facebook	FacebookCore
Permitir que usuários entrem no app e que o app solicite permissões de acesso de dados	FacebookLogin
Permitir que o app compartilhe conteúdo no Facebook	FacebookShare
Permitir que os usuários entrem no app para habilitar o engajamento e promover recursos sociais	FacebookGamingServices

Etapa 2: configurar o projeto

Configure o arquivo Info.plist com um trecho em XML que contenha dados sobre o aplicativo.

Clique com o botão direito do mouse em Info.plist e selecione Abrir como ▸ Código-fonte. Copie e cole o seguinte trecho em XML no corpo do arquivo (<dict>…</dict>).

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fbAPP-ID</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>APP-ID</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>APP-NAME</string>

Em <array><string>, na chave[CFBundleURLSchemes], substitua APP-ID pelo ID do aplicativo.
Em<string>, na chave FacebookAppID, substitua APP-ID pelo ID do aplicativo.
Em <string>, na chave FacebookClientToken, substitua CLIENT-TOKEN pelo valor encontrado em Configurações > Avançado > Token de cliente no Painel de Aplicativos.
Em <string>, na chave FacebookDisplayName, substitua APP-NAME pelo nome do aplicativo.
Para usar um diálogo do Facebook (por exemplo, o diálogo Entrar, o diálogo de compartilhamento, convite para o aplicativo, entre outros) que possa executar uma mudança em aplicativos do Facebook, o Info.plist do aplicativo precisará incluir isto também:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
</array>

É necessário que o projeto tenha o recurso Keychain Sharing para que o login funcione em aplicativos do Mac Catalyst.

Clique no botão + Capability na aba Signing & Capabilities ao configurar o direcionamento do aplicativo.
Encontre e selecione o recurso Keychain Sharing.
Verifique se o recurso Keychain Sharing está listado para o direcionamento.

Etapa 3: conectar o App Delegate

Substitua o código no método AppDelegate.swift pela opção exibida abaixo. Esse código inicializa o SDK quando seu app é iniciado e permite que o SDK gerencie logins e compartilhamentos do app nativo do Facebook quando você executa uma ação Entrar ou Compartilhar. Caso contrário, o usuário precisará estar conectado ao Facebook para fazer login pelo navegador no app.

// AppDelegate.swift
import UIKit
import FacebookCore

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {    
    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {          
        ApplicationDelegate.shared.application(
            application,
            didFinishLaunchingWithOptions: launchOptions
        )

        return true
    }
          
    func application(
        _ app: UIApplication,
        open url: URL,
        options: [UIApplication.OpenURLOptionsKey : Any] = [:]
    ) -> Bool {
        ApplicationDelegate.shared.application(
            app,
            open: url,
            sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] 
as? String,
            annotation: options[UIApplication.OpenURLOptionsKey.annotation]
        )
    }  
}

O iOS 13 moveu a funcionalidade da URL de abertura para SceneDelegate. Se estiver usando o iOS 13, adicione o seguinte método ao SceneDelegate para que operações como login ou compartilhamento funcionem conforme esperado:

// SceneDelegate.swift
import FacebookCore
  ...
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    guard let url = URLContexts.first?.url else {
        return
    }

    ApplicationDelegate.shared.application(
        UIApplication.shared,
        open: url,
        sourceApplication: nil,
        annotation: [UIApplication.OpenURLOptionsKey.annotation]
    )
}

Etapa 4: criar e executar o projeto no simulador

No Xcode, selecione um simulador de iOS e clique em Executar. O Xcode cria seu projeto e inicializa a versão mais recente do seu aplicativo em execução no Simulador.

Pronto, agora você sabe o básico para dar um upgrade no seu app iOS com o SDK do Facebook. É só seguir os passos, ajustar algumas configurações e seu aplicativo vai ficar mais inteligente e útil para seus usuários.

Mas espere, não vamos esquecer de nossos amigos desenvolvedores Android! Assim como no iOS, o SDK do Facebook oferece uma série de recursos poderosos que você pode integrar ao seu aplicativo Android para melhorar a experiência do usuário. Vamos direto ao ponto!

Como começar implementar para Android?

Você precisará do seguinte:

O ID do app da Meta
O token de cliente do app da Meta

Configuração do Android Studio

Criar o seu projeto

Adicione o SDK do Facebook como uma dependência de compilação e importe-o para usá-lo em um projeto do Android Studio.

Acesse Android Studio | New Project | Minimum SDK.
Selecione a versão API 15: Android 4.0.3 (IceCreamSandwich) ou mais recente e crie o novo projeto.
Abra o arquivo Gradle Scripts | build.gradle (Project: <your_project>) e adicione o código a seguir:
```
<span class="pln">mavenCentral</span><span class="pun">()</span>
```
Salve e feche o arquivo build.gradle (Project: <your_project>).
Abra o arquivo Gradle Scripts | build.gradle (Module: app) e adicione este código à seção dependencies:
```
implementation 'com.facebook.android:facebook-android-sdk:latest.release'
```
Salve e feche o arquivo build.gradle (Module: app).
Crie o projeto. Agora, é possível importar com.facebook.FacebookSdk para o app.

Atualizar o manifesto

Adicione o ID do app e o token de cliente ao arquivo de strings e atualize o arquivo de manifesto. Para isso, siga estas instruções:

Abra o arquivo /app/res/values/strings.xml no projeto do app.
Adicione os elementos string com os nomes facebook_app_id e facebook_client_token e defina os valores do ID do app e token de cliente. Por exemplo, se o ID do app for 1234 e o token do cliente for 56789, o seu código terá esta aparência:
```
<string name="facebook_app_id">1234</string>
 <stringname="facebook_client_token">56789 </string>
```
Abra o arquivo /app/manifests/AndroidManifest.xml no projeto do app.

Adicione elementos meta-data ao elemento application para o ID do app e o token do cliente:

<application android:label="@string/app_name" ...> 
... <meta-data android:name="com.facebook.sdk.ApplicationId" 
android:value="@string/facebook_app_id"/>
 <meta-data android:name="com.facebook.sdk.ClientToken" 
android:value="@string/facebook_client_token"/> ... </application>

Adicione um elemento uses-permission ao manifesto depois do elemento application:
```
<uses-permission android:name="android.permission.INTERNET"/>
```
(Opcional) Para recusar a permissão de ID de publicidade, adicione um elemento uses-permission ao manifesto depois do elemento application:
```
<uses-permission android:name=
"com.google.android.gms.
permission.AD_ID" tools:node="remove"/>
```
Crie o projeto.

Habilitar o compartilhamento

Se você compartilha links, imagens ou vídeos do seu app, declare a autoridade FacebookContentProvider no manifesto. Para isso, siga estas instruções:

Abra o arquivo /app/manifests/AndroidManifest.xml no projeto do app.
Adicione o elemento provider ao manifesto para a autoridade FacebookContentProvider. Inclua o ID do app no final do valor authorities. Por exemplo, se o ID do app for 1234, a declaração será semelhante a:
```
<provider android:authorities="com.facebook.app.FacebookContentProvider1234"
    android:name="com.facebook.FacebookContentProvider"
    android:exported="true" />
```

Executar exemplos de app

O SDK do Facebook para Android inclui exemplos como o HelloFacebookSample, que demonstra diversas funcionalidades. Para testá-los, você precisa importar o SDK em um projeto Android Studio. Esses exemplos têm uma dependência de projeto local, então qualquer atualização no SDK reflete neles. Antes de executar os exemplos, é necessário gerar hashes de chave para seu ambiente de desenvolvimento e adicioná-las ao seu perfil de desenvolvedor do Facebook. Ferramentas como Keytool e OpenSSL podem ser usadas para isso.

keytool -exportcert -alias androiddebugkey -keystore 
~/.android/debug.keystore | openssl sha1 -binary | openssl base64

No Windows, você precisa do seguinte:

Ferramenta de gerenciamento de certificado e chave (keytool) do Kit de desenvolvimento Java
Open SSL for Windows Library do Google Code Archive

Insira o código abaixo em um prompt de comando da pasta SDK para Java. Essa ação gera uma string com 28 caracteres.

keytool -exportcert -alias androiddebugkey 
-keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl
base64

Acesse o site Meta for Developers. Entre no Facebook e acesse Configurações do desenvolvedor no menu suspenso no canto superior direito:

Selecione Exemplo de aplicativo no menu para adicionar e salvar o hash de chave ao seu perfil:

Criar um hash de chave de desenvolvimento

O Facebook requer um hash de chave para autenticar a comunicação entre seu aplicativo e o app do Facebook. Se você usa o Login do Facebook, é necessário adicionar este hash ao seu perfil de desenvolvedor. Um hash de chave de versão também é necessário para apps lançados. No OS X e Windows, o hash pode ser gerado manualmente ou obtido através de Settings.getApplicationSignature(Context). Mais detalhes estão disponíveis na seção ‘Executar exemplos de aplicativo’.

Criar um hash de chave de versão

Para autenticar a troca de informações entre o seu app e o Facebook, é necessário gerar um hash de chave de versão e adicioná-lo às configurações do Android do ID do app do Facebook. Sem essa informação, a sua integração com o Facebook pode não funcionar de forma adequada quando você lançar o app na App Store.

Em uma etapa anterior, você precisa atualizar as suas configurações de desenvolvedor do Facebook com os hashes de chave dos ambientes de desenvolvimento.

Quando você publica o seu app, ele normalmente tem uma assinatura diferente do seu ambiente de desenvolvimento. Por isso, crie um hash de chave de versão e adicione-o às configurações do Android do ID do app do Facebook.

Para gerar um hash da chave de versão, execute o seguinte comando no Mac ou Windows substituindo o alias de chave de versão e o caminho para o keystore.

No Mac OS, execute:

keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> 
| openssl sha1 -binary | openssl base64

No Windows, você precisa do seguinte:

Ferramenta de gerenciamento de certificado e chave (keytool) do Kit de desenvolvimento Java
Open SSL for Windows Library do Google Code Archive

Execute o código abaixo em um prompt de comando da pasta SDK para Java:

keytool -exportcert -alias <RELEASE_KEY_ALIAS>
 -keystore <RELEASE_KEY_PATH> | PATH_TO_OPENSSL_LIBRARY\bin\openssl sha1 -binary |
 PATH_TO_OPENSSL_LIBRARY\bin\openssl base64

Use a senha que você definiu quando criou pela primeira vez a chave de versão.

Essa ação gera uma string de 28 caracteres. Copie e cole esse hash de chave de lançamento nas configurações do Android do número de identificação do app do Facebook.

Espero que este artigo tenha sido útil na compreensão da implementação do SDK do Facebook. Para mais tutoriais e curiosidades, continue acompanhando nosso blog.

Tags:facebook instalação sdk

10 de setembro de 2023

João Vitor

Data Analytics

Desenvolvimento

Tag Manager

O Que é SDK?

Vamos ao Que Interessa: Como começar implementar para IOS?

Pré-Requisitos

Obter o ID do app

Obter o token do cliente

Etapa 1: configurar o ambiente de desenvolvimento

Etapa 2: configurar o projeto

Etapa 3: conectar o App Delegate

Etapa 4: criar e executar o projeto no simulador

Como começar implementar para Android?

Você precisará do seguinte:

Configuração do Android Studio

Criar o seu projeto

Atualizar o manifesto

Habilitar o compartilhamento

Executar exemplos de app

Criar um hash de chave de desenvolvimento

Criar um hash de chave de versão

Posts Relacionados

Se gostou desse post
leia esses também...

O poder da inovação brasileira no Oriente Médio

Como iniciar sua jornada na Web 3?

Metaversar é preciso!

O Que é SDK?

Vamos ao Que Interessa: Como começar implementar para IOS?

Pré-Requisitos

Obter o ID do app

Obter o token do cliente

Etapa 1: configurar o ambiente de desenvolvimento

Etapa 2: configurar o projeto

Etapa 3: conectar o App Delegate

Etapa 4: criar e executar o projeto no simulador

Como começar implementar para Android?

Você precisará do seguinte:

Configuração do Android Studio

Criar o seu projeto

Atualizar o manifesto

Habilitar o compartilhamento

Executar exemplos de app

Criar um hash de chave de desenvolvimento

Criar um hash de chave de versão

Posts Relacionados

Se gostou desse post leia esses também...

O poder da inovação brasileira no Oriente Médio

Como iniciar sua jornada na Web 3?

Metaversar é preciso!

Se gostou desse post
leia esses também...