Apple developer portal setup
To be able to make the Check in with Apple work to your web site you may want a payed developer account. That’ll price you $99 / 12 months if you’re a person developer. You may examine numerous membership choices or simply merely enroll utilizing this hyperlink, however you may want an current Apple ID.
I assume that you just made it up to now and you’ve got a working Apple developer account by now. A typical misbelief about Check in with Apple (SiwA) is that you just want an current iOS utility publised to the App Retailer to make it work, however that is not the case. It really works with out a companion app, nevertheless you may want an utility identifier registered within the dev portal.
App identifier
Choose the Identifiers menu merchandise from the checklist on the left, press the plus (+) button, choose the App IDs choice and press the Proceed button. Fill out the outline subject and enter a customized bunde indentifier that you just’d like to make use of (e.g. com.mydomain.ios.app). Scroll down the Capabilities checklist till you discover the Check in With Apple choice, mark the checkbox (the Allow as main App ID ought to seem proper subsequent to an edit button) and press the Proceed button on the highest proper nook. Register the appliance identifier utilizing the highest proper button, after you discover all the things all proper.
You need to see the newly created AppID within the checklist, if not there’s a search icon on the suitable facet of the display screen. Decide the AppIDs choice and the appliance identifer merchandise ought to seem. 🔍
Service identifier
Subsequent we want a service identifier for SiwA. Press the add button once more and now choose the Companies IDs choice. Enter an outline and fill out the identifier utilizing the identical reverse-domain title model. I choose to make use of my area title with a suffix, that may be one thing like com.instance.siwa.service. Press the Proceed and the Register buttons, we’re virtually prepared with the configuration half.
Filter the checklist of identifiers by Service IDs and click on on the newly created one. There’s a Configure button, that you need to press. Now affiliate the Main App ID to this service identifier by deciding on the appliance id that we made beforehand from the choice checklist. Press the plus button subsequent to the Web site URLs textual content and enter the given area that you just’d like to make use of (e.g. instance.com).
You will even have so as to add no less than one Return URL, which is mainly a redirect URL that the service can use after an auth request. You need to at all times use HTTPS, however aside from this constraint the redirect URL might be something (e.g. https://instance.com/siwa-redirect). #notrailingslash
You may add or take away URLs at any time utilizing this display screen, fortunately there’s a take away choice for each area and redirect URL. Press Subsequent to save lots of the URLs and Carried out if you end up prepared with the Check in with Apple service configuration course of.
Keys
The very last thing that we have to create on the dev portal is a personal key for shopper authentication. Choose the Keys menu merchandise on the left and press the add new button. Title the important thing as you need, choose the Check in with Apple choice from the checklist. Within the Configure menu choose the Main App ID, it must be related with the appliance identifier we made earlier. Click on Save to return to the earlier display screen and press Proceed. Assessment the information and at last press the Register button.
Now that is your solely likelihood to get the registered personal key, when you pressed the achieved button with out downloading it, you’ll lose the important thing eternally, you need to make a brand new one, however don’t fret an excessive amount of when you messed it up you’ll be able to click on on the important thing, press the massive pink Revoke button to delete it and begin the method once more. This comes helpful if the important thing will get compromised, so do not share it with anyone else in any other case you may should make a brand new one. 🔑
Group & JWK identifier
I virtually neglect that you’re going to want your group identifier and the JWK identifier for the register course of. The JWK id might be discovered beneath the beforehand generated key particulars web page. For those who click on on the title of the important thing you’ll be able to view the main points. The Key ID is on that web page alongside with the revoke button and the Check in with Apple configuration part the place you may get the group identifier too, because the service bundle identifier is prefixed with that. Alternatively you’ll be able to copy the group id from the very prime proper nook of the dev portal, it is proper subsequent to your title.
Implementing Check in With Apple
Earlier than we write a single line of Swift code let me clarify a simplified model of all the course of.
The complete login circulate has 3 major elements:
- Provoke an internet auth request utilizing the SiwA button (begin the OAuth circulate)
- Validate the returned person id token utilizing Apple’s JWK service
- Alternate the person id token for an entry token
A few of the tutorials overcomplicate this, however you may see how simple is to put in writing all the circulate utilizing Vapor 4. We do not even want further scripts that generate tokens we will do all the things in pure Swift, which is nice. Lets begin a brand new Vapor venture. You will want the JWT bundle as properly.
import PackageDescription
let bundle = Bundle(
title: "binarybirds",
platforms: [
.macOS(.v10_15)
],
dependencies: [
.package(url: "https://github.com/vapor/vapor.git", from: "4.4.0"),
.package(url: "https://github.com/vapor/leaf.git", from: "4.0.0-rc"),
.package(url: "https://github.com/vapor/jwt.git", from: "4.0.0-rc"),
],
targets: [
.target(name: "App", dependencies: [
.product(name: "Vapor", package: "vapor"),
.product(name: "Leaf", package: "leaf"),
.product(name: "JWT", package: "jwt"),
]),
.goal(title: "Run", dependencies: ["App"]),
]
)If you do not know methods to construct the venture you need to learn my learners information about Vapor 4.
The Check in with Apple button
We’ll use the Leaf template engine to render our views, it is fairly easy to make it work, I am going to present you the configuration file in a second. We’ll use only one easy template this time. We will name it index.leaf and save the file into the Sources/Views listing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta title="viewport" content material="width=device-width, initial-scale=1">
<model>
.signin-button {
width: 240px;
top: 40px;
}
.signin-button > div > div > svg {
width: 100%;
top: 100%;
coloration: pink;
}
.signin-button:hover {
cursor: pointer;
}
.signin-button > div {
define: none;
}
</model>
</head>
<physique>
<script sort="textual content/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
<div id="appleid-signin" data-color="black" data-border="false" data-type="register" class="signin-button"></div>
<script sort="textual content/javascript">
AppleID.auth.init({
clientId : '#(clientId)',
scope : '#(scope)',
redirectURI: '#(redirectUrl)',
state : '#(state)',
usePopup : #(popup),
});
</script>
</physique>
</html>
The Check in with Apple JS framework can be utilized to render the login button on the web site. There’s a related factor for iOS referred to as AuthenticationServices, however this time we’re solely going to focus on the internet. Sadly the register button is sort of buggy so we’ve so as to add some further CSS hack to repair the underlying points. Come on Apple, why do we’ve to hack this stuff? 😅
Beginning the AppleID auth course of is absolutely easy you simply should configure a couple of parameters. The shopper id is service the bundle identifier that we entered on the developer portal. The scope might be both title or electronic mail, however you need to use each if you need. The redirect URI is the redirect URL that we registered on the dev portal, and the state must be one thing distinctive that you need to use to determine the request. Apple will ship this state again to you within the response.
Noone talks concerning the usePopup parameter, so we’ll go away it that method too… 🤔
Alternatively you need to use meta tags to configure the authorization object, you’ll be able to learn extra about this within the Configuring your webpage for Check in with Apple documentation.
Vapor configuration
It is time to configure our Vapor utility so we will render this Leaf template file and use the signing key that we acquired from Apple utilizing the dev portal. We’re coping with some secret information right here, so you need to by no means retailer it within the repository, however you need to use Vapor’s atmosphere for this objective. I choose to have an extension for the obtainable atmosphere variables.
extension Setting {
static var siwaId = Setting.get("SIWA_ID")!
static let siwaRedirectUrl = Setting.get("SIWA_REDIRECT_URL")!
static var siwaTeamId = Setting.get("SIWA_TEAM_ID")!
static var siwaJWKId = Setting.get("SIWA_JWK_ID")!
static var siwaKey = Setting.get("SIWA_KEY")!
}In Vapor 4 you’ll be able to setup a customized JWT signer that may signal the payload with the correct keys and different values based mostly on the configuration. This JWT signer can be utilized to confirm the token within the response. It really works like magic. JWT & JWTKit is an official Vapor bundle, there may be undoubtedly no have to implement your personal resolution. On this first instance we’ll simply put together the signer for later use and render the index web page so we will initalize the OAuth request utilizing the web site.
import Vapor
import Leaf
import JWT
extension JWKIdentifier {
static let apple = JWKIdentifier(string: Setting.siwaJWKId)
}
extension String {
var bytes: [UInt8] {
return .init(self.utf8)
}
}
public func configure(_ app: Utility) throws {
app.views.use(.leaf)
app.middleware.use(SessionsMiddleware(session: app.classes.driver))
app.jwt.apple.applicationIdentifier = Setting.siwaId
let signer = attempt JWTSigner.es256(key: .personal(pem: Setting.siwaKey.bytes))
app.jwt.signers.use(signer, child: .apple, isDefault: false)
app.get { req -> EventLoopFuture<View> in
struct ViewContext: Encodable {
var clientId: String
var scope: String = "title electronic mail"
var redirectUrl: String
var state: String
var popup: Bool = false
}
let state = [UInt8].random(depend: 16).base64
req.session.information["state"] = state
let context = ViewContext(clientId: Setting.siwaId,
redirectUrl: Setting.siwaRedirectUrl,
state: state)
return req.view.render("index", context)
}
}The session middleware is used to switch a random generated code between the index web page and the redirect handler. Now when you run the app and click on on the Check in with Apple button you may see that the circulate begins, however it’ll fail after you recognized your self. That is okay, the 1st step is accomplished. ✅
The redirect handler
Apple will attempt to ship a POST request with an object that incorporates the Apple ID token to the registered redirect URI after you have recognized your self utilizing their login field. We will mannequin this response object as an AppleAuthResponse struct within the following method:
import Basis
struct AppleAuthResponse: Decodable {
enum CodingKeys: String, CodingKey {
case code
case state
case idToken = "id_token"
case person
}
let code: String
let state: String
let idToken: String
let person: String
}The authorization code is the primary parameter, the state shuld be equal along with your state worth that you just ship as a parameter while you press the login button, if they do not match do not belief the response any individual is making an attempt to hack you. The idToken is the Apple ID token, we’ve to validate that utilizing the JWKS validation endpoint. The person string is the e-mail handle of the person.
app.put up("siwa-redirect") { req in
let state = req.session.information["state"] ?? ""
let auth = attempt req.content material.decode(AppleAuthResponse.self)
guard !state.isEmpty, state == auth.state else {
return req.eventLoop.future("Invalid state")
}
return req.jwt.apple.confirm(auth.idToken, applicationIdentifier: Setting.siwaId)
.flatMap { token in
}
}The code above will deal with the incoming response. First it’s going to attempt to decode the AppleAuthResponse object from the physique, subsequent it’s going to name the Apple verification service utilizing your personal key and the idToken worth from the response. This validation service returns an AppleIdentityToken object. That is a part of the JWTKit bundle. We have simply accomplished Step 2. ☺️
Exchanging the entry token
The AppleIdentityToken solely lives for a brief time period so we’ve to alternate it for an entry token that can be utilized for for much longer. We’ve got to assemble a request, we’re going to use the next request physique to alternate tokens:
struct AppleTokenRequestBody: Encodable {
enum CodingKeys: String, CodingKey {
case clientId = "client_id"
case clientSecret = "client_secret"
case code
case grantType = "grant_type"
case redirectUri = "redirect_uri"
}
let clientId: String
let clientSecret: String
let code: String
let redirectUri: String
let grantType: String = "authorization_code"
}We’ll additionally have to generate the shopper secret, based mostly on the response we’re going to make a brand new AppleAuthToken object for this that may be signed utilizing the already configured JWT service.
struct AppleAuthToken: JWTPayload {
let iss: String
let iat = Int(Date().timeIntervalSince1970)
let exp: Int
let aud = "https://appleid.apple.com"
let sub: String
init(clientId: String, teamId: String, expirationSeconds: Int = 86400 * 180) {
sub = clientId
iss = teamId
exp = self.iat + expirationSeconds
}
func confirm(utilizing signer: JWTSigner) throws {
guard iss.depend == 10 else {
throw JWTError.claimVerificationFailure(title: "iss", purpose: "TeamId have to be your 10-character Group ID from the developer portal")
}
let lifetime = exp - iat
guard 0...15777000 ~= lifetime else {
throw JWTError.claimVerificationFailure(title: "exp", purpose: "Expiration have to be between 0 and 15777000")
}
}
}Since we’ve to make a brand new request we will use the built-in AysncHTTPClient service. I’ve made a little bit extension across the HTTPClient object to simplify the request creation course of.
extension HTTPClient {
static func appleAuthTokenRequest(_ physique: AppleTokenRequestBody) throws -> HTTPClient.Request {
var request = attempt HTTPClient.Request(url: "https://appleid.apple.com/auth/token", technique: .POST)
request.headers.add(title: "Person-Agent", worth: "Mozilla/5.0 (Home windows NT 6.2) AppleWebKit/536.6 (KHTML, like Gecko) Chrome/20.0.1090.0 Safari/536.6'")
request.headers.add(title: "Settle for", worth: "utility/json")
request.headers.add(title: "Content material-Kind", worth: "utility/x-www-form-urlencoded")
request.physique = .string(attempt URLEncodedFormEncoder().encode(physique))
return request
}
}The humorous factor right here is when you do not add the Person-Agent header the SiwA service will return with an error, the issue was talked about in this text additionally mentioned on the Apple Developer Fourms.
Anyway, let me present you the entire redirect handler. 🤓
app.put up("siwa-redirect") { req -> EventLoopFuture<String> in
let state = req.session.information["state"] ?? ""
let auth = attempt req.content material.decode(AppleAuthResponse.self)
guard !state.isEmpty, state == auth.state else {
return req.eventLoop.future("Invalid state")
}
return req.jwt.apple.confirm(auth.idToken, applicationIdentifier: Setting.siwaId)
.flatMap { token -> EventLoopFuture<HTTPClient.Response> in
do {
let secret = AppleAuthToken(clientId: Setting.siwaId, teamId: Setting.siwaTeamId)
let secretJwtToken = attempt app.jwt.signers.signal(secret, child: .apple)
let physique = AppleTokenRequestBody(clientId: Setting.siwaId,
clientSecret: secretJwtToken,
code: auth.code,
redirectUri: Setting.siwaRedirectUrl)
let request = attempt HTTPClient.appleAuthTokenRequest(physique)
return app.http.shopper.shared.execute(request: request)
}
catch {
return req.eventLoop.future(error: error)
}
}
.map { response -> String in
guard var physique = response.physique else {
return "n/a"
}
return physique.readString(size: physique.readableBytes) ?? "n/a"
}
}As you’ll be able to see I am simply sending the alternate request and map the ultimate response to a string. From this level it’s very easy to implement a decoder, the response is one thing like this:
struct AppleAccessToken: Decodable {
enum CodingKeys: String, CodingKey {
case accessToken = "access_token"
case tokenType = "token_type"
case expiresIn = "expires_in"
case refreshToken = "refresh_token"
case idToken = "id_token"
}
let accessToken: String
let tokenType: String
let expiresIn: Int
let refreshToken: String
let idToken: String
}You need to use this response to authenticate your customers, however that is up-to-you based mostly by yourself enterprise logic & necessities. You need to use the identical authTokenRequest technique to refresh the token, you simply should set the grant sort to refresh_token as an alternative of authorization_code
I do know that there’s nonetheless room for enhancements, the code is way from good, however it’s a working proof of idea. The article is getting actually lengthy, so possibly that is the suitable time cease. 😅
If you’re on the lookout for a superb place to be taught extra about SiwA, you need to test this hyperlink.
Conclusion
You may have a working Check in with Apple implementation inside an hour if you’re utilizing Vapor 4. The toughest half right here is that you need to work out each single little element by your self, different folks’s supply code. I am making an attempt to elucidate issues as simple as potential however hey, I am nonetheless placing collectively the items for myself too.
That is an especially enjoyable journey for me. Transferring again to the server facet after virtually a decade of iOS improvement is a refreshing expertise. I can solely hope you may take pleasure in my upcoming guide referred to as Sensible Server Facet Swift, as a lot as I take pleasure in studying and writing concerning the Vapor. ❤️