WWDC Case Interpretation: How is the direct scanning payment of Dianping camera realized

background

On December 4 last year, Apple CEO Tim Cook and Wang Xing visited dhuchun, an old fried food restaurant in Shanghai. They used the Dianping App to experience the new features of iOS 11, including finding a reservation with a map, ordering with a camera and paying with Apple Pay.

At this year’s WWDC, dianping went one step further: In the speech “Create Great Customer Experience Using Wallet and Apple Pay”, Apple technicians specially demonstrated how to use the iPhone camera to directly scan the code to order food. And use Apple Pay to Pay the whole closed-loop process. How does the technology behind this work?

Implementation scheme

Camera sweep code

Since iOS 7, the system has given apps the ability to “scan the camera” through AVFoundation. But only by code in the form of constructing AVCaptureDevice, and set the output type is AVMetadataObjectTypeQRCode, to implement the qr code identification within the App. However, there was no system-level code scanning entry for the entire iOS system in the following years. Until the release of iOS 11, Apple finally provided the ability to scan QR code and recognize and jump to the corresponding URL in the system “Camera” App.

Universal-Link

Universal Link was introduced after iOS 9 to enable seamless connection between urls and apps. Before that, it was a custom URL Scheme. Compared with a custom URL Scheme, Universal Link has the following advantages:

• Uniqueness: Universal Link uses the standard HTTP protocol URL, which has uniqueness.
• Security: The App can control which urls are processed.
• Simple and flexible: THE URL is common to both H5 and App. If no App is installed, it will jump to Safari to open the corresponding H5.
• Privacy: There is no need to know whether the user has installed the target App before jumping.

With the combination of “camera scan” and Universal Link, we can directly evoke the App from the system “camera scan”.

Specific scheme: a qr code corresponding to a Universal Link will be put into the App as material, and the user can scan the QR code directly with the “camera” of the system. If the App is installed, a prompt box “Whether to open it with The App” will appear. Click to enter the App. As follows:

Facing the challenge

The above solutions are best practices based on the existing capabilities of iOS, but there are plenty of surprises in the real world:

• The material has been put out on a large scale, what can we do if we can’t modify it?
• The whole process is initiated by “camera scan code”, how does the business know where the entry is?
• What if Universal Link cannot jump in wechat?

We know that Universal Link takes effect mainly on two parts:

• Associated Domains configured in the Capabilities of the AppTarget to control the Domain under Universal Link.
• Apple-app-site-association deployed on a WebServer controls the Path of the corresponding Domain.

In other words, in the use of Universal Link in large-scale engineering projects, URL must follow certain rules, so that all businesses can be used together without interfering with each other. The review App also formulated usage specifications when introducing Universal Link.

However, since the corresponding material has been released in large numbers, the URL of the TWO-DIMENSIONAL code in the material has not considered the adaptation of Universal Link, which cannot follow the above “best practice”, and the cost of replacing the material is very high, and the time is not allowed.

So we had to “find another way” to implement this feature. Since Universal Link itself has no restrictions on urls, we can theoretically turn any URL into Universal Link through deployment configuration.

In this way, the material two-dimensional code can not follow the Universal Link specification we have defined, but this is also the “compromise” we must accept, in the local sacrifice of some normative for the realization of important functions.

This is not the end of the matter. This implementation brings another problem: the behavior of opening the URL corresponding to the material QR code in the WebView will change.

According to Apple’s official explanation, Universal Link is triggered “actively” by the user, such as in an email, notepad or other App, by invoking the App to open the URL. However, if the user directly enters or clicks the link to open the URL in Safari, the system will open it directly in the same Domain page, and the App will be directly evoked in the non-same Domain page.

In other words, if you open a non-same-origin page in the WebView of the App, and then click the Universal Link on this page, it will become a direct call to the openURL method of the system. If you do not do any processing, it may jump out of the App. Even after processing most apps, a new page will open at this point.

This is obviously not what we want, but we have to configure these urls as Universal links. Finally, under very difficult circumstances, we reached a consensus with our business classmates: For this batch of special 2d codes for material delivery, the business system guaranteed the uniqueness of THE URL usage scenarios, and would not use this batch of characteristic urls in other scenarios except 2d codes, so as to bypass the abnormal Case of WebView opening in the App.

In this way, we completed the implementation of “Arousing App by scanning code for existing iOS camera with qr code”.

In this particular scenario, the whole process is initiated from outside the App, and the business needs to know the current scene of “camera scan evokes App”.

Unfortunately, iOS doesn’t have a clear path to start the App, except for the userActivity callbacks. All we know is that the App was woken up by Universal Link.

Since the startup node is outside the control scope of App, any method of Native burial point cannot take effect at this time. The only thing we can get is the URL that is awakened. Lack of sufficient context may be the most difficult part of all startup related businesses.

Thanks to the solution of Problem 1, we knew that this URL had scene uniqueness in App Scope, so we could compare Tricky to judge the current scene. Once you have the current startup scenario id, you need to think about how to inform the business.

The simplest way is to modify the URL to inform the specific characteristics of the business. However, as a general platform App, it is obviously not appropriate to directly modify the original URL of the business side, and it may cause unnecessary trouble. Header, Cookie, JSBridge, etc., can be considered as the way of communication with H5.

So far, we have completed the “scan code from the system camera to evoke the App to enter the corresponding page”. However, in China, wechat is the largest qr code scanning entrance, in January of this year, wechat completely closed the jump behavior of Universal Link, any Universal Link in wechat can not jump out.

“Picked sesame, lost watermelon”, this ROI is too heavy for us to accept. Considering that before the birth of Universal Link, we used openSchema to evoke App, and “comprehensive Link” was the main way H5 invoked App in wechat at that time, we could set another layer of comprehensive Link in the Universal Link page and distinguish user scenes. Arouse the “original intention” of App from wechat.

conclusion

Dianping has participated in many live demonstrations of WWDC in the past, starting with PassKit of iOS 6, and experienced Flat Design, MessageKit, MapKit, SiriKit, ApplePay and WWDC2018 ApplePay flash pay. We have accumulated rich experience in communication and cooperation with Apple, not only in the closed development of the On-site Apple Campus, but also in the Face2Face of IAPM, and more often in the remote cooperation at 492 Anhua Road.

Usually, BD students will find demand points based on the existing functions of review App and the new capabilities provided by Apple. This kind of secondary development based on external system upgrade adaptation always meets various problems. Some problems will be easy to solve directly, others will challenge the boundaries we set and require compromise, and there will be problems that cannot be overcome directly but must be avoided.

The binary world is always defined by inputs, computations, and outputs. Planning the overall architecture, clearly delineating input and output boundaries, and minimizing external dependencies allows us to operate without context and without end-to-end control of the overall process.

Team to introduce

The mobile R&D center of the platform is generally responsible for dianping APP. Relying on platform capabilities, we continue to deliver high quality services: Shark, Picasso, Logan, MCI, Mobile Home, Appkit, etc. Here, we work with “best partners” to do “the most complex business” with “the most stringent standards”, endure the test and forge ahead together to build an industry-leading mobile development team.

If you find any mistakes or have any questions about the content, you can follow the wechat official account of Meituantech and leave a message to us in the background. Every week, we will select a warm-hearted friend and send a nice small gift. Scan the code to pay attention to us!