5 листопада 2019 р.

Процес інтеграції входу до 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 варіанти:

Нам потрібно отримати аналітику з WeChat.
Нам не потрібна аналітика з 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

Тут все просто.

Натисніть велику зелену кнопку «Створити мобільний додаток» та введіть загальну інформацію про програму.
Заповніть відомості про платформу, додайте AppID та відповідну інформацію.
Додайте особисту інформацію, необхідну на останніх кроках. Це може бути сканування копій ваших документів, виписки по рахунку та безлічі інших даних у будь-який час.
Нарешті, заплатіть 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 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 як 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 як 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 китайської соціальної мережі, ми готові виконати для вас проєкт, просто зв'яжіться з нашим фахівцем. Про всяк випадок ми вже пожертвували єдинорогом;)