Pular para o conteúdo principal

Configurar login social com WeChat (Nativo)

O conector oficial do Logto para login social do WeChat em aplicativos nativos (iOS e Android).

dica:

Este guia assume que você tem um entendimento básico dos Conectores (Connectors) do Logto. Para aqueles que não estão familiarizados, consulte o guia de Conectores para começar.

Primeiros passos​

Se você não conhece o conceito de conector ou não sabe como adicionar este conector à sua Experiência de login, consulte o tutorial do Logto.

Em aplicativos nativos, não é possível usar a web como método de login do WeChat: é necessário navegar até o aplicativo WeChat, além de ser obrigatório o uso do SDK deles.

Sabemos que parece complicado, mas não se preocupe. Vamos lidar com isso facilmente neste tutorial.

Crie um aplicativo móvel na WeChat Open Platform​

dica:

Você pode pular algumas seções se já tiver concluído.

Crie uma conta​

Acesse https://open.weixin.qq.com/, clique no botão "Sign Up" no canto superior direito e conclua o processo de cadastro.

Crie um aplicativo móvel​

Faça login com a conta que você acabou de criar. Na aba "Mobile Application" (移动应用), clique no grande botão verde "Create a mobile app" (创建移动应用).

Abas do aplicativo

Vamos preencher as informações obrigatórias no formulário de inscrição.

Criar aplicativo móvel

Informações básicas​

A maioria delas é bem direta, e temos algumas dicas aqui:

  • Se você só quer testar o login do WeChat e o aplicativo não está na App Store, na seção "App is available", escolha "No" para pular o "App download link".
  • O "App operation flow chart" parece complicado. Pela nossa experiência, você precisa preparar um fluxograma simples e algumas capturas de tela do aplicativo para aumentar as chances de aprovação.

Clique em "Next step" para continuar.

Informações da plataforma​

Você pode configurar uma ou ambas as plataformas iOS e Android para integrar o Logto com o login nativo do WeChat.

Aplicativo iOS

Marque "iOS app" (iOS 应用) e, em seguida, marque o tipo de dispositivo alvo do seu aplicativo conforme necessário.

Plataforma do aplicativo

Se você escolheu "No" para a disponibilidade na App Store, pode pular o preenchimento do "AppStore download address" aqui.

Preencha o Bundle ID, Test version Bundle ID e Universal Links (na verdade, apenas um link é necessário 😂).

nota:

Bundle ID e Test version Bundle ID podem ter o mesmo valor.

dica:

O WeChat exige universal link para login nativo. Se você ainda não configurou ou não sabe o que é, consulte a documentação oficial da Apple.

Aplicativo Android

Marque "Android app" (Android 应用).

Plataforma do aplicativo Android

Preencha Application Signing Signature (应用签名) e Application Package Name (应用包名).

nota:

Você precisa assinar seu aplicativo para obter a assinatura. Consulte Assine seu aplicativo para mais informações.

Após concluir a assinatura, você pode executar a tarefa signingReport para obter a assinatura.

./gradlew your-android-project:signingReport

O valor MD5 do relatório da variante de build correspondente será o Application Signing Signature (应用签名), mas lembre-se de remover todos os dois-pontos do valor e deixá-lo em minúsculas.

Exemplo: 1A:2B:3C:4D -> 1a2b3c4d.

Aguardando o resultado da análise​

Após concluir as informações da plataforma, clique em "Submit Review" para continuar. Normalmente, a análise é rápida e termina em 1-2 dias.

Suspeitamos que o revisor é alocado aleatoriamente a cada envio, já que o padrão é variável. Você pode ser rejeitado na primeira vez, mas não desista! Explique sua situação e pergunte ao revisor como modificar.

Ative o login nativo do WeChat no seu aplicativo​

iOS​

Assumimos que você já integrou o Logto iOS SDK no seu aplicativo. Neste caso, as coisas são bem simples e você nem precisa ler a documentação do SDK do WeChat:

1. Configure o universal link e o esquema de URL no seu projeto Xcode

No projeto Xcode -> aba Signing & Capabilities, adicione a capacidade "Associated Domains" e o universal link que você configurou anteriormente.

Universal link

Depois, vá para a aba "Info" e adicione um custom URL scheme com o App ID do WeChat.

Custom URL scheme

Por fim, abra seu Info.plist e adicione weixinULAPI e weixin em LSApplicationQueriesSchemes.

Plist
nota:

Sabemos que essas ações não são muito razoáveis, mas esta é a solução mínima que encontramos. Veja o guia oficial mágico para mais informações.

2. Adicione LogtoSocialPluginWechat ao seu projeto Xcode

Adicione o framework:

Adicionar framework

E adicione -ObjC em Build Settings > Linking > Other Linker Flags:

Linker flags
nota:

O plugin inclui o WeChat Open SDK 1.9.2. Você pode usar diretamente import WechatOpenSDK após importar o plugin.

3. Adicione o plugin nas opções de inicialização do seu LogtoClient

let logtoClient = LogtoClient(
  useConfig: config,
  socialPlugins: [LogtoSocialPluginWechat()]
)

4. Trate o onOpenURL corretamente

nota:

A função LogtoClient.handle(url:) irá tratar todos os conectores nativos que você ativou. Você só precisa chamá-la uma vez.

// SwiftUI
YourRootView()
  .onOpenURL { url in
      LogtoClient.handle(url: url)
  }

// ou AppDelegate
func application(_ app: UIApplication, open url: URL, options: /*...*/) -> Bool {
  LogtoClient.handle(url: url)
}

Android​

Assumimos que você já integrou o Logto Android SDK no seu aplicativo. Neste caso, as coisas são bem simples e você nem precisa ler a documentação do SDK do WeChat:

1. Adicione o Wechat Open SDK ao seu projeto

Garanta que o repositório mavenCentral() está nos repositórios do seu projeto Gradle:

repositories {
  // ...
  mavenCentral()
}

Adicione o Wechat Open SDK às suas dependências:

dependencies {
  // ...
  api("com.tencent.mm.opensdk:wechat-sdk-android:6.8.0")  // kotlin-script
  // ou
  api 'com.tencent.mm.opensdk:wechat-sdk-android:6.8.0'   // groovy-script
}

2. Implemente o WXEntryActivity no seu projeto

Crie um pacote wxapi sob o root do seu pacote e adicione o WXEntryActivity no pacote wxapi (usando com.sample.app como exemplo):

// WXEntryActivity.kt
package com.sample.app.wxapi

import io.logto.sdk.android.auth.social.wechat.WechatSocialResultActivity

class WXEntryActivity: WechatSocialResultActivity()
// WXEntryActivity.java
package com.sample.app.wxapi

import io.logto.sdk.android.auth.social.wechat.WechatSocialResultActivity

public class WXEntryActivity extends WechatSocialResultActivity {}

A posição final do WXEntryActivity no projeto deve ser assim (usando Kotlin como exemplo):

src/main/kotlin/com/sample/app/wxapi/WXEntryActivity.kt

3. Modifique o AndroidManifest.xml

Adicione a seguinte linha ao seu AndroidManifest.xml:

\<?xml version="1.0" encoding="utf-8"?>
\<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.sample.app">

  \<application>
    \<!-- linha a ser adicionada -->
    \<activity android:name=".wxapi.WXEntryActivity" android:exported="true"/>
  \</application>

\</manifest>

Teste o conector nativo do WeChat​

É isso! Não se esqueça de Ativar o conector social no cadastro e login.

Depois que o conector nativo do WeChat estiver ativado, você pode compilar e executar seu aplicativo para ver se está funcionando.

cuidado:

O WeChat não tem solução para dispositivos sem o aplicativo WeChat instalado. O Logto irá ocultar este conector durante o login nesses casos (que é a forma recomendada pelo guia oficial de desenvolvimento).