iOS到条带化API身份验证(Swift 3 + Node.js + XCode教程)

在过去的几年中,Stripe已成长为在线支付领域的重要平台。 Stripe在开发人员社区中尤其受欢迎-凭借其友好的API,开发人员可以非常快速地将Stripe插入其网站/应用程序。

在本教程中,我们将介绍通过Swift应用程序启动对Stripe帐户的身份验证的过程。 本教程假定您已经有一个Stripe Account设置。 希望这将是许多Swift / Stripe教程中的第一个。 敬请关注!

本教程由2个组件组成; 客户端iOS Swift应用程序和后端Node.js应用程序。 我们将从Node.js应用程序开始依次介绍每一个。

转到此>> Git存储库以访问已为您设置的Node.js应用程序。 提供的自述文件将引导您完成如何克隆存储库,执行必要的编辑并将其部署在Heroku上的说明。

通过设置Node.js应用程序并在Heroku上运行,我们现在将完成一个简单的任务,即创建将与Node.js后端一起使用的客户端Swift应用程序,以对您的Stripe帐户进行身份验证-仅需15个简单步骤!

注意:您可以在此处访问该项目第2部分的存储库>>

步骤1。

创建一个单一视图应用程序,并为其分配一个适当的名称。 我叫我StripeConnectApp

第2步。

删除默认创建的两个文件,即ViewController.swiftLaunchScreen.storyboard 。 我喜欢这样做纯粹是出于整理的目的,尤其是因为我不需要该项目的启动屏幕

第三步

创建2个Cocoa Touch类(它们都是UIViewController的子类),分别命名为MainViewControllerStripeConnectViewController

步骤4。

下载>>,解压缩3个图像文件并将其拖到Assets.xcassets文件夹中。 在我们进行项目时,将在以后的阶段中引用它们。

第五步

将IDE界面切换到故事板— Main.storyboard 。 选择默认的ViewController场景并将其嵌入到导航控制器中,如下所示。

第六步

在ViewController上选择了Navigation Item的“ Attributes Inspector”部分中,如下所示填充TitleBack Button属性的值。

步骤7

将一个Button UI元素从“对象库”拖到默认的“视图控制器”上。 选中“按钮”后,在“属性”检查器中,转到“图像”属性,然后选择可用的图像,如下所示。

步骤8

调整按钮的宽度以适合其附带的图像。 重新放置Button,将其放置在ViewController的中心并设置其约束,如下所示。

步骤9。

选择默认的ViewController后,在Identity Inspector部分中,从Class属性中选择“ MainViewController ”,如下所示。

第十步

从对象库中拖动ViewController UI元素 ,使其与第一个ViewController相邻,如下所示。

步骤11

Web View UI元素从对象库中拖到第二个ViewController上,将其边缘伸出以填充整个场景。 如下所示设置Web视图的约束。

步骤12

接下来,将活动指示器UI元素从对象库拖到第二个ViewController上。 将其放置在ViewController的中心并设置其约束,如下所示。

步骤13

选择第二个ViewController后,在Identity Inspector中 ,从Class Attribute下拉列表中选择’ StripeConnectViewController ‘。

步骤14。

从这一刻起,我们现在将继续研究应用程序的实质(通过切换到源代码)。 在情节提要中选择StripeConnectViewController后,单击“助手编辑器”图标(由2个相交的圆圈表示)。 StripeConnectViewController.swift源代码文件应与Storyboard视图并排显示。 通过分别从StripeConnectViewController场景上的UIWebview和UIActivityIndi​​catorView接口元素按ctrl拖动,在StripeConnectViewController.swift中创建2个出口,即webviewactivityIndi​​catorView 。 见下文;

步骤15

修改类的其余部分,如下面的代码块所示。 需要UIWebViewDelegate (与类定义一致定义),以便类可以侦听并根据UIWebView的不同状态处理事件。 声明为url的实例变量表示您在本教程的第1部分中部署的Heroku托管的Node.js应用程序的URL。 该应用程序的秘密来源实际上包含在viewDidLoad中,在该处发出访问您的Stripe帐户的请求。 webViewDidStartLoadwebViewDidFinishLoadwebView_didFailLoadWithErrorwebView_shouldStartLoadWith代表了我们定义UIWebViewDelegate时提到的UIWebView的不同状态。

另外一件重要的事情; 整个项目的主要目标是在成功验证用户的Stripe帐户后检索Stripe用户ID / Stripe帐户ID。 在成功进行身份验证期间,您可以从部署的Node.js服务器中获取上述ID作为查询字符串。 这是在委托方法中完成的。 webView_shouldStartLoadWith。 然后,您可以继续使用ID做任何您想做的事情-就像将其保存在数据库中一样。

  // 
// StripeConnectViewController.swift
// StripeConnectApp
//
//由Mohau Mpoti在17/10/17上创建。
//
//电子邮件:mohau@openbeacon.biz
//
//版权所有©2017 Swift教程。 版权所有。
//
导入UIKit
类StripeConnectViewController:UIViewController,UIWebViewDelegate {


@IBOutlet弱var webview:UIWebView!

@IBOutlet弱var activityIndi​​catorView:UIActivityIndi​​catorView!

//将其替换为您的Heroku托管的Node.js应用网址
让url = URL(字符串:“ https://my-customurl-73648.herokuapp.com”)

覆盖func viewDidLoad(){
super.viewDidLoad()

webview.delegate =自我
activityIndi​​catorView.isHidden = true


警卫让url = self.url else {
self.alert(消息:“ URL似乎无效。”)
返回
}

let path:字符串=“ / authorize”

让cachePolicy = NSURLRequest.CachePolicy.reloadIgnoringLocalAndRemoteCacheData
让超时:TimeInterval = 6.0
var request = URLRequest(URL:url.appendingPathComponent(path),cachePolicy:cachePolicy,timeoutInterval:timeout)

request.httpMethod =“ GET”

activityIndi​​catorView.isHidden = false
webview.loadRequest(请求)

}

func webViewDidStartLoad(_ webView:UIWebView){
activityIndi​​catorView.startAnimating()
}

func webViewDidFinishLoad(_ webView:UIWebView){
activityIndi​​catorView.isHidden = true
activityIndi​​catorView.stopAnimating()
}

func webView(_ webView:UIWebView,didFailLoadWithError错误:错误){
self.alert(消息:error.localizedDescription)
}

func webView(_ webView:UIWebView,shouldStartLoadWith request:URLRequest,navigationType:UIWebViewNavigationType)->布尔{
如果让url = request.url {

如果让urlComponents = URLComponents(string:url.absoluteString){
如果让queryString = urlComponents.queryItems {
用于查询queryString {
如果query.name ==“ stripe_user_id” {
如果让值= query.value {

//如果对您的Stripe帐户的身份验证成功,则Stripe用户ID将作为查询字符串返回到变量“值”中。 然后,您可以将其保存到应用程序的数据库中,以供以后任何后续的Stripe连接请求使用。

print(“ Stripe User ID = \(value)”)
}
}
}
}
}
}

返回真
}

func alert(消息:字符串){
让alertController = UIAlertController(title:标题,message:消息,preferredStyle:.alert)

let action = UIAlertAction(title:“ OK”,样式:.default,处理程序:{(alert:UIAlertAction!)
self.dismiss(动画:true,完成:nil)
})

alertController.addAction(动作)

DispatchQueue.main.async(execute:{()-> Void in
self.present(alertController,动画:true,完成:无)
})
}
}

继续构建和运行项目。 祝好运!

在这里,您可以访问该项目中包含的2个App的存储库。

  • Node.js仓库(包含部署说明):https://github.com/mohaumpoti/stripe-connect-nodejs-app
  • Swift 3 App回购:https://github.com/mohaumpoti/stripe-connect-ios-app

通过从事我的主要项目Spreebie,我有机会学习所有这些技术。 Spreebie是一个平台,可实时将买家导航到附近的卖家。 我邀请您在这里查看>>

希望对您有所帮助。 下一个再见!

-莫 h