Ionic项目中集成Android及IOS版极光推送功能

开发环境以window为主,先集成android版本,成功后在调试ios版本,其中要特别注意bundId,下面会说到

一.环境配置

Ionic:

 

   Ionic CLI          : 5.4.16 

   Ionic Framework    : ionic-angular 3.9.9

   @ionic/app-scripts : 3.2.4

 

Cordova:

 

   Cordova CLI       : not installed

   Cordova Platforms : android 8.1.0

   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, (and 16 other plugins)

 

Utility:

 

   cordova-res (update available: 0.15.1) : 0.14.0

   native-run                             : not installed

 

System:

 

   Android SDK Tools : 26.1.1 (E:\anzhuang\asSDK)

   NodeJS            : v12.16.3 (E:\anzhuang\node\node.exe)

   npm               : 6.14.4

   OS                : Windows 10

 

二.注册及登录极光官网并创建应用获取appId及secret

极光官网地址:https://www.jiguang.cn

在极光应用列表创建应用获取应用信息:https://www.jiguang.cn/dev2/#/overview/appCardList

Ionic项目中集成Android及IOS版极光推送功能

 

保存下应用的appKeyId及Secret的值,并给后端,后端在接入极光推送时需要此参数,项目中集成极光推送就不具体介绍了github写的都很清楚,默认认为读者已经集成好了Android版本并能监听拿到数据

项目如果有IOS版,建议先配置IOS,为什么呢,因为bundleID可能被占用导致和包名不一致,导致调试困难,后面会说到如何更改,为了节省时间,先配置IOS的证书,生成bundleID后,在将这个值写成Android中的包名

 

Ionic项目中集成Android及IOS版极光推送功能

 

下面我们的工作是配置证书,主要是获得p12文件,在新版本中只需要生成生成证书即可应用于开发环境,这样我们就没必要生成开发环境的证书及描述文件了

Ionic项目中集成Android及IOS版极光推送功能

 

三.IOS应用p12的生成

 

①.登录苹果开发者平台:https://developer.apple.com

点击如图所示的任意红框

Ionic项目中集成Android及IOS版极光推送功能

 

②.点击 Identifiers-> 加号 ->勾选AppIDs -> 点击Continue ->选择App ->点击Continue ->填写bundleId及description的值,并在Capabilities中勾选PushNotification ->点击Register完成

Ionic项目中集成Android及IOS版极光推送功能

 

 

Ionic项目中集成Android及IOS版极光推送功能

 

Ionic项目中集成Android及IOS版极光推送功能

并在Capabilities中勾选PushNotification

Ionic项目中集成Android及IOS版极光推送功能

如果bundleID已经被别人注册了,即弹窗如下图所示,因此先确定bundleID在更改app的包名

Ionic项目中集成Android及IOS版极光推送功能

 

 

③生成证书文件xx.cer

点击Certificates -> 加号 -> 选择Services中的APNs(Production),点击Continue ->选择②中生成的AppID然后点击Continue -> 从Mac本中生成xxx.certSigningRequest文件上传 -> ->->

Ionic项目中集成Android及IOS版极光推送功能

 

选择Services中的APNs(Production)如图所示

Ionic项目中集成Android及IOS版极光推送功能

 

选择②中生成的AppID然后点击Continue

 

Ionic项目中集成Android及IOS版极光推送功能

 

选择Mac中生成的.certSigningRequest文件上传,下面会介绍如何生成CRS文件

Ionic项目中集成Android及IOS版极光推送功能

 

XXX.certSigningRequest 在Mac系统中的生成步骤如下:

1.首先点击应用钥匙串窗口,在屏幕左上角出现钥匙串访问 文字

2.点击屏幕左上角的钥匙串访问按钮

3.点击证书助理

4.点击从证书机构请求证书

Ionic项目中集成Android及IOS版极光推送功能

 

5.输入自己的电子邮箱并选择存储到磁盘,

Ionic项目中集成Android及IOS版极光推送功能

 

6.选择桌面存储,即可得到XXX.certSigningRequest

Ionic项目中集成Android及IOS版极光推送功能

 

④.将XXX.certSigningRequest文件上传即可得到XXX.cer文件并下载

 

Ionic项目中集成Android及IOS版极光推送功能

 

⑤.生成xxx.p12文件

 

将④中生成的xxx.cer证书放到打包项目的Mac电脑中,然后点击这个证书安装,需要在钥匙串中导出p12文件

在Mac桌面查找Launchpad点击 ->找到 其他 文件夹点击 -> 选择 钥匙串访问 应用点击 ->选择登录 ->我的证书 ->根据包名找到刚才安装的证书 ->右键点击 ->选择 导出XXX ->选择保存到桌面 ->点击 存储即可将p12文件保存到桌面中

 

Ionic项目中集成Android及IOS版极光推送功能

 

 

⑥.将得到的p12文件上传到极光证书配置即可

 

四.Token Authen配置

 

上面这种证书配置比较麻烦并且具有时间限制,下面我们在介绍第二种配置方式 Token Authen配置

 

Ionic项目中集成Android及IOS版极光推送功能

这种方式需要我们上次一个XXX.p8文件,KeyID在p8文件上传后会自动填充,和创建p8文件生成的keyID是一致的,TeamID需要我们去页面在找下,BundleId也会自动填充

 

Ionic项目中集成Android及IOS版极光推送功能

 

我们到Keys页面下新建个即可,因为每个p8文件只能下载一次,其实所有的项目可以共用一个p8文件,但是我没有第一个的下载文件所以新建了一个,之后项目可以共用了

 

Ionic项目中集成Android及IOS版极光推送功能

 

 

根据页面提示操作123步

Ionic项目中集成Android及IOS版极光推送功能

 

之后选择默认的勾选一路Continue即可,最后将p8文件下载并上传到极光官网即可

 

TeamID值获取页面如下图所示

 

Ionic项目中集成Android及IOS版极光推送功能

 

最终配置页面如下图所示,证书配置完全没必要,浪费时间不说后期还得维护

Ionic项目中集成Android及IOS版极光推送功能

 

五.创建描述文件,注意类型的选择,选择完类型之后在选择和bundleId一直的AppId

 

Ionic项目中集成Android及IOS版极光推送功能

 

 

 

选择和bundleID一致的AppID

 

Ionic项目中集成Android及IOS版极光推送功能

 

选择默认的主证书

 

Ionic项目中集成Android及IOS版极光推送功能

 

选择能安装当前项目安装包的设备,设备可以在device中添加,主要的UDID获取可以用蒲公英获取,iphone手机直接访问下面的连接地址一步步操作即可https://www.pgyer.com/udid,默认选择所有设备即可,然后将描述文件下载到Mac并点击安装

 

Ionic项目中集成Android及IOS版极光推送功能

 

六.配置XCode工程

 

1.配置xx-info.plist,手动更改为bundleId的值

 

Ionic项目中集成Android及IOS版极光推送功能

 

2.在General中的Team选择主证书,当然也可以去掉Automaticaly manage signing前面的勾选,改为手动配置

 

Ionic项目中集成Android及IOS版极光推送功能

 

3.在Capabilities中开启Push Notifications开关,并且正常状态图片如下

 

Ionic项目中集成Android及IOS版极光推送功能

 

4.在BuildSetting中配置主证书及描述文件

Ionic项目中集成Android及IOS版极光推送功能

 

5.然后正常打包即可

6.在web端推送一条消息,移动端页面如下:

Ionic项目中集成Android及IOS版极光推送功能

 

至此,Android端及IOS端的打包及推送功能都正常完成了,下面在说下极光推送的bundleID和包名不一致问题如何解决,项目开发很多都是Android先行,特别是混合开发的情况下,等在考虑到IOS应用,Android端可能已经开发完成了,如果发现bundleId被别人占用了,不用慌,最快最省事的方式联系极光的技术人员,让他们直接改数据库更改包名,先建一个别人未使用过的bundleId,然后通过发邮件的方式更改包名或者bundleId值,极光技术邮箱: [email protected]

邮件格式如下:

 

尊敬的极光客户:

为提高 support 邮件的处理速度,特规范业务申请的信息格式,若有清空 IOS Bundle ID 、修改 Android 包名的需求,请参考文末所示说明,根据你的业务需求,按以下表格提供相应的信息:

业务 b - 清空 IOS Bundle ID

是否了解风险

客户填写(在表格中删除本提示填上内容即可)

Appkey

客户填写

iOS 需清空的 BundleID

客户填写

业务 c - 修改 Android 包名

是否了解风险

客户填写(在表格中删除本提示填上内容即可)

Appkey

客户填写

Android 新包名信息

客户填写

注意:

1. 要求提供的其它图片资料请务必以附件形式添加,若复制粘贴至邮件正文很可能无法查看;

2. 若办理的业务中有多个 Appkey,添加表格行即可,表格信息直接在邮件正文填写。

关于“清空 iOS Bundle ID”或“修改 Android 包名”的说明

1、此时清空 iOS 证书(或修改 Android 包名)将会影响到之前的所有用户收不到推送,而且旧 Bundle ID(旧包名)对应的历史统计数据将保留到新 Bundle ID(新包名),但旧 Bundle ID(旧包名)的 App 所产生的新数据将无法继续上报到修改了 Bundle ID(包名)的 AppKey 下。

2、苹果根据 Bundle ID 区分应用,Bundle ID 不同,就会当成不同应用,你 Bundle ID 变更,以前的用户都没法进行升级操作,除非卸载重装。Android 同理。

 

建议做法:新建应用,上传新证书。

(应用信息-点编辑-有删除应用按钮,可以根据需求删除或保留旧应用)

若在了解该风险后,依旧确认修改,提供以下信息

(以下信息请同时提供,缺一不可):

1.  说明自己已了解修改包名或清空 Bundle ID 所带来的风险,并仍决定修改包名或清空 Bundle ID。(填写至上述表格)

2.  极光官网应用信息截图(确认应用,附件提供)

3.  极光官网账户信息截图(确认身份,附件提供)

4.  应用的 AppKey (填写至上述表格)

5.  说明你要清空 iOS 的 Bundle ID 还是修改 Android 的包名(二者互不影响)

a)  Android 包名不支持直接清空,只能修改,所以如果是修改 Android 的包名,请提供你将要重新设置的新包名是什么(填写至上述表格)

b)  iOS 在我们清空 Bundle ID 后,你们可以自己重新上传正确的证书,即可得到正确的 Bundle ID,提供你将要清除的旧 Bundle ID 信息(填写至上述表格)

在信息提供完毕后我们将安排处理,需要一定耗时,处理完毕后会告知,请知悉。

 

仅以此篇文章记录IOS开发中极光推送的集成及各种证书申请。