Процесс интеграции входа в WeChat: пошаговое руководство

Автор: Андрей
WeChat Login Integration Process: Tips And Tricks To Know

Следуя последним тенденциям реализации функционала, мы постоянно сталкиваемся с необходимостью интеграции поддержки социальных сетей в разрабатываемые нами приложения. Как правило, при интеграции с Facebook или любой другой популярной американской или европейской социальной сетью проблем не возникает. Однако с китайскими социальными сетями все не так.

Почему родилась эта статья? Все просто, интеграция мобильных приложений WeChat сегодня является обычной практикой в Китае, но в ходе нашего недавнего проекта мы столкнулись с рядом проблем с интеграцией WeChat.

Это было мобильное приложение для полнофункциональной разработки платформы обработки данных. Сказать, что было сложно, значит ничего не сказать. Мы можем только сказать вам, что мы выдержали удары и оказались в каждом тупике в процессе интеграции этой социальной сети в приложение.

Мы намеренно подробно изучили нюансы и особенности интеграции мобильного API WeChat, чтобы знать все тонкости работы с этим SDK. Stfalcon обслуживает клиентов по всему миру и работает на различные рынки, поэтому WeChat привлек наше внимание как самая популярная социальная сеть в Китае. Более того, она уже давно превысила уровень простой социальной платформы.

Два года назад количество активных пользователей в месяц превысило один миллиард. Теперь его уже называют «суперприложением для всего» благодаря широкому набору функций, доступных благодаря множеству вариантов интеграции со сторонними поставщиками WeChat.

Благодаря платежному API WeChat он может похвастаться почти монополией в области электронных кошельков и онлайн-платежей в регионе, даже офлайн-платежи на улицах Китая теперь часто осуществляются с помощью WeChat, а также благотворительной деятельности. к бездомным, кстати.

Переменные CRM с интеграцией WeChat и API QR-кода WeChat открывают практически безграничные возможности для бизнеса, а не только для создания, сканирования и использования QR-кодов для различных целей.

При таком потенциале, скрытом в этой социальной сети, мы не могли оставить без внимания каждый нюанс ее интеграции. Итак, приступим к делу.

Трудный пациент: WeChat

Первая мысль, которая приходит в голову: «Это популярная социальная сеть, для нее должно быть руководство или учебник и API для разработчиков WeChat». Результаты поиска в первом приближении выявляют самую популярную статью из medium.com.

Однако уже через через несколько минут понимаешь, что социальная сеть китайская и руководства также на китайском языке. Если быть точнее, то я бы допустил, что англоязычная версия существует, но содержит лишь инструкции по интеграции WeChat для некоторых начальных шагов. Итак, будьте готовы постоянно пользоваться переводчиком. К чему еще следует быть готовым? Приготовьтесь искать способы решения возможных проблем на китайском языке на случай, если что-то пойдет не так и план провалится. Также следует учитывать, что в Интернете существует множество устаревших решений, работающих со старыми версиями API.

Шаг 1. Установка WeChat Android SDK.

Мы устанавливаем WeChat SDK в наш проект.

Кстати, есть 2 варианта:

  1. Нам нужно получить аналитику из WeChat.
  2. Нам не нужна аналитика из WeChat.

В первом случае мы обходимся без раздела зависимости модуля app и добавляем следующее:

implementation 'com.tencent.mm.opensdk:wechat-sdk-android-without-mta:5.4.3'

Если нужна аналитика, стоит добавить:

implementation 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:5.4.3'

Кроме того, нужно не забыть про манифест:

Шаг 2. Создание приложения в панели администратора

Создаем наше приложение в админ-панели: https://open.weixin.qq.com

Здесь все просто.

  1. Нажмите большую зеленую кнопку «Создать мобильное приложение» и введите общую информацию о приложении.
  2. Заполните сведения о платформе, добавьте AppID и соответствующую информацию.
  3. Добавьте личную информацию, необходимую на последних шагах. Это может быть сканирование копий ваших документов, выписки по счету и множества других данных в любое время.
  4. Наконец, заплатите 99 долларов США и пройдите процесс проверки приложения, который занимает не меньше, не больше 5–7 рабочих дней. Здесь можно заплакать :).

После успешной проверки аккаунта WeChat вы должны вспомнить, чем вы были неделю назад :).

Шаг 3. Регистрация объекта WeChat

Создаем и регистрируем копию объекта WeChat. Wechat_app_id берется из админ-панели, и app_secret также должен быть сгенерирован и сохранен здесь.

Для этого добавьте в класс приложения следующий код:

IWXAPI = WXAPIFactory.createWXAPI(this, getString(R.string.wechat_app_id), true)
IWXAPI?.registerApp(getString(R.string.wechat_app_id))

Шаг 4. Интеграция API входа в WeChat

Интеграция входа в WeChat на Android начинается с обработки нажатия кнопки входа в систему. В нашем примере это будет примерно так:

private fun onClickWeChatLogin() {
   val app = application as? App
   if (app?.IWXAPI == null) {
       app?.IWXAPI = WXAPIFactory.createWXAPI(this, getString(R.string.wechat_app_id), true)
       app?.IWXAPI?.registerApp(getString(R.string.wechat_app_id))
   }
 
   if (app?.IWXAPI?.isWXAppInstalled == false) {
       toast("Wechat has not been installed on your mobile phone. Please login after installation.")
       return
   }
 
   val req = SendAuth.Req()
   req.scope = "snsapi_userinfo"
   req.state = "wechat_sdk_xb_live_state"
   app?.IWXAPI?.sendReq(req)
}

Шаг 5. Интеграция обработки результатов входа

Добавляем обработку результатов входа. Для этого вам необходимо создать дополнительный пакет wxapi в корне пакета и создать в нем активность под названием WXPayEntryActivity. Например, если имя пакета — com.example.myapp, то полный путь к этому действию должен быть следующим:com.example.myapp.wxapi.WXPayEntryActivity.

IWXAPIEventHandler к этому занятию следует добавить реализацию интерфейса.

Мы извлекаем объект, уже зарегистрированный WeChat, в методе onResume и указываем, кто должен обрабатывать обратные вызовы.

app = application as App
 
       val handleIntent = app?.IWXAPI?.handleIntent(intent, this)
       if (handleIntent == null) {
           finish()
       }

В то же время мы переопределяем методы onNewIntent, onResp и onReq.

override fun onNewIntent(intent: Intent?) {
       super.onNewIntent(intent)
 
       setIntent(intent)
       app?.IWXAPI?.handleIntent(intent, this)
   }
 override fun onResp(baseResp: BaseResp?) {
       when (baseResp?.errCode) {
           BaseResp.ErrCode.ERR_OK -> {
               val code = (baseResp as SendAuth.Resp).code
               viewModel.get().getWeChatToken(code)
           }
           BaseResp.ErrCode.ERR_USER_CANCEL -> {
               finish()
           }
           BaseResp.ErrCode.ERR_AUTH_DENIED -> {
               finish()
           }
       }
   }
override fun onReq(p0: BaseReq?) {
       finish()
   }

Результат входа в систему поступает в метод onResp. В этом обратном вызове мы получим временный код, который затем будем использовать для выполнения запроса на соответствующей конечной точке, передавая app_secret и этот код.

class WXEntryActivity : AppCompatActivity(), IWXAPIEventHandler {
 
   private var code: String? = null
   var resp: BaseResp? = null
 
   private var app: App? = null
 
   @Inject
   @ViewModelInjection
   lateinit var viewModel: ViewModelInjectionField<WXEntryVM>
 
   override fun onResume() {
       super.onResume()
       app = application as App
       app?.IWXAPI?.handleIntent(intent, this)
 
       observeSuccess()
       observeError()
   }
 
   override fun onNewIntent(intent: Intent?) {
       super.onNewIntent(intent)
 
       setIntent(intent)
       app?.IWXAPI?.handleIntent(intent, this)
   }
 
   override fun onResp(baseResp: BaseResp?) {
       if (baseResp != null) {
           resp = baseResp
           code = (baseResp as SendAuth.Resp).code
       }
       when (baseResp?.errCode) {
           BaseResp.ErrCode.ERR_OK -> {
               viewModel.get().getWeChatToken(code)
           }
           BaseResp.ErrCode.ERR_USER_CANCEL -> {
               finish()
           }
           BaseResp.ErrCode.ERR_AUTH_DENIED -> {
               finish()
           }
       }
   }
 
   override fun onReq(p0: BaseReq?) {
       finish()
   }
 
   private fun observeSuccess() {
       viewModel.get().onSuccess.observe(this, Observer {
           startActivity(intentFor<MainActivity>().newTask().clearTask())
           finish()
       })
   }
 
   private fun observeError() {
       viewModel.get().error.observe(this, Observer {
           toast(it)
       })
   }
}

Шаг 6. Добавление сведений о деятельности в манифест

Информацию о нашей деятельности мы добавляем в Манифест.

<activity
   android:name="com.example.myapp.wxapi.WXEntryActivity"
   android:exported="true"
   android:label="@string/app_name"
   android:theme="@style/AppTheme" />

Обратите внимание, что необходимо указать параметр: android:exported="true"

Шаг 7. Добавление запроса API адреса

Добавляем запрос API адреса:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=&secret=&grant_type=authorization_code

Только после этого шага мы получим токен авторизации, который необходимо отправить на бэкенд.

Step 8. Application Signature Generation and Installation

Мы создаем подпись приложения и устанавливаем наше приложение на устройство, на котором уже установлено приложение WeChat. Затем скачиваем официальное приложение для генерации подписи, указываем имя пакета и генерируем хэш-ключ. Этот ключ необходимо добавить в админ-панель.

Последний шаг: запуск приложения

Запускаем приложение, скрещиваем пальцы и молимся, чтобы все заработало. Если вы самый удачливый человек в мире, который прошел церемонию посвящения масонов, был благословлен WeChat API для Библии разработчика и к тому же пожертвовал единорогом на всякий случай, все будет работать с первого раза . Если это не так, предлагаю взглянуть на небольшие советы и рекомендации ниже, которые могут помочь.

Советы и рекомендации

  • Проверьте правильность имени и пути файла WXEntryActivity.
  • Убедитесь, что утилита сгенерировала правильный хеш-ключ.
  • Если вы используете отладочную сборку, необходимо продублировать файл WXEntryActivity по пути com.example.myapp.debug.wxapi.WXPayEntryActivity.
  • При добавлении ключей SHA-1 в панель администратора имейте в виду, что отладочная и релизная сборки имеют разные хеш-ключи. Если вы меняете хеш-ключи, подождите несколько минут, затем попробуйте снова войти в WeChat и только потом пробуйте войти в приложение.

Наш опыт

Stfalcon выполнил проект для клиента из Куала-Лумпур , занимающийся информационными технологиями и услугами. Наша команда осуществила полноценную разработку мобильного приложения для платформы обработки данных. Мы успешно создали функциональную платформу для прогнозирования данных с реализацией контента и социальных функций. Наши разработчики создали приложение с использованием PHP, открытого исходного кода (распространяемого по открытой лицензии) и интеграции со сторонними организациями WeChat для постоянного взаимодействия с пользователем. Мы также реализовали возможности видео, позволяющие пользователям присоединяться через хэштеги.

Заключительные мысли

После реализации этого проекта команда Stfalcon действительно расширила свои знания в области интеграции WeChat с Android и теперь знает ее многочисленные нюансы. Если вы ищете разработчиков, имеющих опыт работы с SDK китайской социальной сети, мы готовы выполнить для вас проект, просто свяжитесь с нашим специалистом. На всякий случай мы уже пожертвовали единорогом ;)