ホームページ ウェブフロントエンド uni-app AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

Aug 31, 2021 pm 06:23 PM
uniapp WeChatログイン

Android アプリの WeChat ログイン機能を uniapp に実装するにはどうすればよいですか?以下の記事では、uniappでのAndroidアプリWeChatログインの許可申請と開発の具体的な操作手順を紹介しますので、皆様のお役に立てれば幸いです。

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

WeChat オープン プラットフォームは、WeChat ログイン、共有支払いなど、WeChat のいくつかのオープン インターフェイスを提供し、他のプラットフォーム アプリケーションのサポート サービスを提供します。オンライン情報が比較的緩い上に、馴染みのない概念が追加されているため、単純なプロセスが連続していませんが、この記事ではuniapp上で許可申請とAndroidアプリWeChatログインの開発を実装するまでの具体的な操作プロセスをまとめています。あなたにとって役に立ちます。

まず、WeChat ログイン機能開発の全体的なプロセスを見てみましょう。以下の内容をより体​​系的に理解できるように、一般的なフローチャートを整理しました。

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要) WeChat ログインの開発はまだ少し面倒であることがわかりますが、ステップごとに詳しく紹介します。

1. WeChat オープン プラットフォーム アカウントを登録する 最初に

WeChat オープン プラットフォーム

アカウントを登録します。このオープン プラットフォームでは、WeChat のログイン、共有、支払い、その他のコンテンツをアプリ、Web ページ、ミニ プログラムなどに開くことができます。具体的なプロセスについては詳しく説明しませんが、WeChat の他の場所で使用されているメール アカウントと競合しないように注意してください。

2. 開発者資格認定 アカウント登録が完了したら、ログインします。WeChatのログイン機能を開発するには、開発者資格認定が必要です。オープンプラットフォームへの登録は現在個人でも受け付けているが、開発者資格認定は企業と機関のみが受け付けており、認定には300元の費用がかかる。私が使用したエンタープライズ認定は、申請プロセス中に関連するエンタープライズ認定証明書を必要とします。プロセスは完全な情報で非常に速く、約 2 ~ 3 日で完了できます。請求書の申請は非常に遅く、約 1 か月かかります。

3. オープン プラットフォームでモバイル アプリケーションを申請します 認証に成功したら、管理センターに入り、モバイル アプリケーションを選択し、モバイル アプリケーションを選択し、手順に従います。ただ行ったり来たりするだけです。唯一問題となるのは、アプリケーションの署名です。このステップに到達したとき、私は完全に混乱しており、アプリケーション署名が何なのかわかりませんでした。

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

#4. アプリケーション署名の生成

上記の説明を見て、アプリケーション署名は主に次の目的で使用されます。 ID 検証は二次検証と呼ばれ、ログインしているユーザーに関連します。通常、オープンプラットフォームにログインして申請することができますが、この署名を取得した以上、このアプリケーションの開発許可を持っていることを証明するためにいくつかの手間がかかります。通常、小規模工場でリリースされる Android アプリのほとんどは公開テスト証明書を使用しますが、アプリケーション署名を生成するには独自の証明書を使用する必要があります。独自の証明書を使用して、WeChat オープン プラットフォームに必要なアプリケーション署名を生成できます。では、この自己所有の証明書はどこから来たのでしょうか?次に、この独自の証明書とアプリケーション署名を作成する方法を見てみましょう。

#独自の証明書を生成します

#1)、jre 環境をインストールします

jre は Java 開発環境です。cmd コマンド ウィンドウを使用して、java コマンドを使用して、現在の環境に jre があるかどうかを確認できます。'java' は内部コマンドでも外部コマンドでもありません。実行可能なプログラムまたはバッチ ファイル、つまりインストールされていないことを意味します。出力が次のようであれば、インストールされていることを意味します:

そうでない場合インストールしたら、jre インストール パッケージをダウンロードします:

www.oracle.com/java/techno…

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

インストール後、cmd を再度開き、再度 java と入力して確認します。通常の出力関連のコンテンツ。次に、jre インストール パスをシステム環境変数に追加する必要があります:

d:  
set PATH=%PATH%;"C:\Program Files\Java\jre1.8.0_201\bin"
ログイン後にコピー

Use cmd to enter the 上記のコマンド. 最初の行は、d ドライブに切り替えることを意味します. このディレクトリは任意であり、次の目的で使用されます。生成された署名証明書については、別のフォルダーを作成してそこに移動できます。 Enter キーを押した後の 2 行目は、一時環境変数に jre コマンドを追加することを意味します。その後のアドレスは、jre の実際のインストール アドレスに基づいています。この手順の後、後続の操作によって生成されるファイルが現在のフォルダーに生成されます。 AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

2) 署名証明書を生成する

上記の手順が正常に完了したら、次の keytool -genkey コマンドを入力して証明書を生成できます。 。ここで、testalias と test.keystore の「test」は変更して、独自のプロジェクトの名前に置き換えることができることに注意してください。

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore
ログイン後にコピー

回车后,输入密码,比如123456,密码看不见的,不要输错了,后面的按提示填就可以了,一般输入英文或拼音。最后提示是否正确时,不要回车了,输入y确认正确,否则要再重来一次。

确认后,又提示密钥口令,这个直接回车相同就行。

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

如果提示这个,就把这个指令复制了粘贴执行,输入前面设置的口令123456就可以了。

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

最后在当前执行命令的文件夹里就能看到应用证书了。

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

生成签名

前面是生成证书,这一步终于可以生成签名了。

3)、使用自有证书打包

这一步很简单,用hbuilderx进行app云打包,在弹出框中选择安卓的自有证书打包方式。这个自有证书就是我们刚才生成的证书,兴不兴奋,我们也是有证书的人了!?下面三栏,别名、密码都是前面的操作步骤中写过的,没忘记就写上吧,然后选择证书文件,剩下的都是常规操作,最后打包就可以了。

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

4)、用签名生成工具生成签名

先到微信开放平台下载签名生成工具,下载好之后,在手机端安装,输入安卓包名。

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

这里有坑,要注意下,uniapp的mainfest.json文件配置中,appid必须是'_UNI_'开头,所以你的配置文件中得是'_UNI_'开头的,但是打包时的包名跟那个配置又是两个体系,互不影响,你可以在这里把名字改下,把uni这个头去掉。因为这个包名后面要跟ios版本一起用,你得跟ios一样,相信打过包的人应该能明白我在说啥。

输入正确的包名(去掉了'UNI'开头),点击下面的按钮就生成了一串id,这个就是——应用签名!真是费劲!

AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

5、按开放平台流程申请应用

有了签名,你就可以按照微信开放平台的流程申请移动应用了,就是本文的第二张图,输入签名,一步步走就行。

1AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

最后就是下面这样子了,代表你提交成功,可以耐心的等了(三天了,没变化,最后过了七八天才通过,中间按要求修改了两次):

1AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

等审核通过,就可以申请微信登录等功能了。

1AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

最后要说的一点就是,app或者你资料中提交的相关域名网站不要给登录界面,否则可能会审核不通过,因为他们进不去,看不了当然无法审核。

6、获取appid和appsecret

移动应用的审核通过后,微信登录功能就会自动开放了,同时开放的还有分享、发送朋友等功能。

1AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

同时,你也可以获取到获取appid和appsecret,这个我自己保存越来,后面开发会用到的。

7、微信登录业务流程梳理

uniapp提供了微信登录api,不过我们首先要清楚微信登录的流程,因为微信登录要配合我们系统自身的业务。我在这里梳理了一张流程图,这张图就是上面总流程图的一部分,你可以对照参考,辅助你开发相关功能。

1AndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)

8、微信登录服务api调用

如果你按照前面的步骤拿到AppId和AppSecret信息,接下来就是按照这个流程来开发微信登录功能。在uniapp上开发app版本的微信登录功能需要调用uni的api还有h5+的api。 这里就直接给一个示例代码:

onLoad() {
	plus.oauth.getServices((services) => {
			this.weixinAuthService = services.find((service) => {
					return service.id === 'weixin'
			})
		});
},
methods: {
	appWxLogin() {
		var self = this;
		this.weixinAuthService.authorize(function(res) {
			//支持微信、qq和微博等
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// 微信用户信息存入本地,后期备用
					var auth = null;
					plus.oauth.getServices(function(services) {
						auth = services.find((service) => {
							return service.id === 'weixin'
						});
						try {
							uni.setStorageSync('auth_service', auth)
						} catch {
	
						}
					}, function(e) {
						console.log(e);
					});
					if (loginRes.authResult) {
						let access_token = loginRes.authResult.access_token;
						let openid = loginRes.authResult.openid;
						uni.request({
							method: 'POST',
							url: 'https://*********/wx-login/appwxlogin',
							data: {
								openid: openid
							},
							success: (res) => {
								console.log(res);
								//将openid存入本地缓存
								uni.setStorage({
									key: 'openid_key',
									data: res.data.openid
								});
								if (res.statusCode == 200 && res.data && res.data.username) {
									self.isFirstWXLogin = false;
									self.name = res.data.username;
									self.password = res.data.password;
									setTimeout(function() {
										self.tologin({
											username: res.data.username,
											password: res.data.password,
											encrypted: true
										})
									}, 0)
								} else {
									//首次登录,跳转到一个绑定账号的页面
									uni.navigateTo({
										url: 'wxlogin'
									});
								}
							},
							fail: (error) => {
								console.log(error);
							},
							complete: (e) => {
								console.log(e);
							}
						})
					} else {
	
					}
				},
				fail(e) {
					console.log(e);
				},
				complete(e) {
					console.log(e);
				}
			});
		}, function(error) {
			console.log(error)
		}, {
			scope: 'snsapi_userinfo'
		})
	}
}
ログイン後にコピー

注意几点: 

1、首先取到微信服务对象this.weixinAuthService。 

2、其次调用授权api——authorize,然后再调用uni.login这个api。

 3、uni.login成功后,如果想取得用户信息可以调用uni.getUserInfo,也可以调用plus.oauth.getServices,后者是h5+的api,前者也是基于后者的封装。 

4、代码中这个接口(/wx-login/appwxlogin)是一个本地服务,具体的业务就是把openid带到用户表中去查找,如果能找到,说明此用户绑定过微信,后端返回用户信息直接登录;如果没找到,就返回提示需要输入用户名密码登录,而且这个登录过程要带上openid,最终插入数据库。

这个api调用与业务开发流程应该比较好理解,我这里也不再画图了,应该都能看明白。 好了,uniapp开发安卓端的微信登录功能就介绍完了,如果对你有用就点个赞或者帮忙转发吧!谢谢鼓励!

推荐:《uniapp教程

以上がAndroidアプリのWeChatログイン機能をuniappに実装する方法(操作手順概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Webstormが開発したuniappプロジェクトのプレビューを開始する方法 Webstormが開発したuniappプロジェクトのプレビューを開始する方法 Apr 08, 2024 pm 06:42 PM

WebStorm で UniApp プロジェクト プレビューを起動する手順: UniApp 開発ツール プラグインをインストールする デバイス設定に接続する WebSocket 起動プレビュー

uniappとmuiではどちらが優れていますか? uniappとmuiではどちらが優れていますか? Apr 06, 2024 am 05:18 AM

一般に、複雑なネイティブ機能が必要な場合は uni-app が適しており、シンプルなインターフェイスまたは高度にカスタマイズされたインターフェイスが必要な場合は MUI が適しています。さらに、uni-app は、1. Vue.js/JavaScript のサポート、2. 豊富なネイティブ コンポーネント/API、3. 優れたエコシステムを備えています。欠点は、1. パフォーマンスの問題、2. インターフェースのカスタマイズの難しさです。 MUI には、1. マテリアル デザインのサポート、2. 高い柔軟性、3. 広範なコンポーネント/テーマ ライブラリがあります。欠点は、1. CSS への依存性、2. ネイティブ コンポーネントが提供されない、3. エコシステムが小さいことです。

uniapp はどのような開発ツールを使用しますか? uniapp はどのような開発ツールを使用しますか? Apr 06, 2024 am 04:27 AM

UniApp は HBuilder を使用します

App StoreでWeChatログインを操作する詳細なプロセス App StoreでWeChatログインを操作する詳細なプロセス Mar 25, 2024 pm 03:41 PM

1. 図に示すように、App Store を開いてログインするときに WeChat ログイン方法がない場合は、次の手順に従ってください: 2. Tencent App Store を使用して WeChat を再ダウンロードし、インストールします (WeChat がすでにインストールされている場合)インストールされている場合は、インストールを上書きします。 3. 一言で言えば、Tencent アプリを使用して WeChat を再ダウンロードし、インストールを完了します。 4. App Store を再度開いてログインすると、[WeChat ログイン] が表示されるので、クリックして WeChat にログインします。 5. この時点で、WeChat ログイン アプリケーションは完了です。

ユニアプリのデメリットは何ですか ユニアプリのデメリットは何ですか Apr 06, 2024 am 04:06 AM

UniApp は、クロスプラットフォーム開発フレームワークとして多くの便利さを備えていますが、欠点も明らかです。ハイブリッド開発モードによってパフォーマンスが制限され、その結果、開く速度、ページのレンダリング、およびインタラクティブな応答が低下します。エコシステムは不完全で、特定の分野のコンポーネントやライブラリが少ないため、創造性や複雑な機能の実現が制限されています。さまざまなプラットフォームでの互換性の問題により、スタイルの違いや API サポートの一貫性の欠如が発生する傾向があります。 WebView のセキュリティ メカニズムはネイティブ アプリケーションとは異なるため、アプリケーションのセキュリティが低下する可能性があります。複数のプラットフォームを同時にサポートするアプリケーションのリリースと更新には、複数のコンパイルとパッケージが必要となり、開発とメンテナンスのコストが増加します。

uniapp を学習するにはどのような基礎が必要ですか? uniapp を学習するにはどのような基礎が必要ですか? Apr 06, 2024 am 04:45 AM

uniapp 開発には次の基礎が必要です: フロントエンド テクノロジ (HTML、CSS、JavaScript) モバイル開発の知識 (iOS および Android プラットフォーム) Node.js のその他の基礎 (バージョン管理ツール、IDE、モバイル開発シミュレーター、または実機のデバッグ経験)

ユニアプリとネイティブ開発のどちらが優れていますか? ユニアプリとネイティブ開発のどちらが優れていますか? Apr 06, 2024 am 05:06 AM

UniApp とネイティブ開発のどちらを選択する場合は、開発コスト、パフォーマンス、ユーザー エクスペリエンス、および柔軟性を考慮する必要があります。 UniApp の利点は、クロスプラットフォーム開発、迅速な反復、容易な学習、組み込みプラグインですが、ネイティブ開発はパフォーマンス、安定性、ネイティブ エクスペリエンス、スケーラビリティの点で優れています。特定のプロジェクトのニーズに基づいてメリットとデメリットを比較検討し、UniApp は初心者に適しており、ネイティブ開発は高いパフォーマンスとシームレスなエクスペリエンスを追求する複雑なアプリケーションに適しています。

DouyinがWeChatログイン許可を取得していない問題を解決するにはどうすればよいですか? WeChat にログインする許可を取得できなかった場合はどうなりますか? DouyinがWeChatログイン許可を取得していない問題を解決するにはどうすればよいですか? WeChat にログインする許可を取得できなかった場合はどうなりますか? Mar 24, 2024 pm 03:46 PM

人気のショートビデオプラットフォームとして、Douyin は WeChat アカウントのログイン機能と密接に関係しています。一部のユーザーがWeChat経由でDouyinにログインしようとすると、WeChatのログイン許可を取得できないという問題が発生し、ユーザーに迷惑がかかる場合があります。ここでは、ユーザーがDouyinをスムーズに使用できるように、DouyinがWeChatログイン許可を取得できない問題を解決する方法を詳しく紹介します。 1.DouyinがWeChatログイン許可を取得していない問題を解決するにはどうすればよいですか?まず、WeChat アカウントの設定を確認して、Douyin の使用が制限されていないことを確認してください。 WeChat 設定のアカウントとセキュリティ オプションに移動して、ログイン許可設定を表示できます。最新の WeChat ログイン機能と互換性があるように、Douyin アプリが最新の状態に保たれていることを確認してください。システムの互換性と安定性を確保するために、App Store で Douyin アプリを定期的にチェックして更新してください。 3.クリア

See all articles